Адаптация строк BootsTrap

Question

Есть 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>

Answer 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>

БЛОГ НА HUSL

Адаптация строк BootsTrap

Ответы (1 шт):