0

Есть 12 блоков по 4 в ряд, как сделать, чтобы при уменьшении экрана последний блок переносился в следующий row, а не создавал новый, т.е. чтобы было по 3 в ряд и последний элемент прыгал в следующий row.

<div class="row">
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
</div>

3
  • Кажется вам нужны флексы или гриды
    – Alexey Ten
    12 июл 2021 в 9:35
  • 1
    не надо вообще делать 2 row тогда и проблемы не будет. сложите все блоки в одну строку
    – teran
    12 июл 2021 в 9:43
  • Понял, большое спасибо! 12 июл 2021 в 10:04

1 ответ 1

1

Вам @teran в комментарии совершенно справедливо указал на источник проблемы: не нужно делать отдельные row для каждых 4-х блоков, надо сложить все блоки в один row:

[class^="col"] {
  padding: 50px;
  border: 1px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
  <div class="col-lg-4 col-xl-3">
   <div class="block">
   </div>
  </div>
</div>

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