0

Есть квадратные блоки внутри бустраповского контейнера:

<div class="container">
  <div class="card_item"></div>
  <div class="card_item"></div>
  <div class="card_item"></div>
  <div class="card_item"></div>
  <div class="card_item"></div>
</div>

Как сделать, чтобы они были в одной строке, а при сужении экрана переносились на след.строку по одному по мере сужения экрана? Без js.

1 ответ 1

1

Как вариант задать контейнеру свойство: display: flex; Почитать можно здесь про флексбоксы https://frontender.info/a-guide-to-flexbox/

.container .card_item{width: 150px;height:150px;background:#d3d3d3;border:1px solid red;}
.container{display:flex;flex-direction:row;flex-wrap:wrap;}
<div class="container">
  <div class="card_item"></div>
  <div class="card_item"></div>
  <div class="card_item"></div>
  <div class="card_item"></div>
  <div class="card_item"></div>
</div>

Ко всему использовать медиазапросы:

@media screen and (max-width: 700px){
    // изменяем поведении  при этом расширении
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.