Почему образовывается пустота?

Question

[Lorem Ipsum]

Если уменьшить ширину (у меня 1024px), то появляется пустота.



Пробовал играть с самыми разными классами Bootstrap'а, но ничего не помогло.



UPD. В общем разобрался сам, просто добавил после row — col, это получается

<span class="text-left apSquare align-middle px-2 mr-1 mb-1 sold" id="4395" onclick="showApInfo(4395)">

Прошлая структура:

<div class="col mt-1 px-0">
          <span class="text-left apSquare align-middle px-2 mr-1 mb-1 sold" id="4395" onclick="showApInfo(4395)">
</div>

Новая:

<div class="col mt-1 px-0">
  <div class="row">
    <span class="text-left apSquare align-middle px-2 mr-1 mb-1 sold" id="4395" onclick="showApInfo(4395)">
  </div>
</div>

Comments

[Михаил]

не появляется

[approximate solution]

Скриншот в студию что ли

[Lorem Ipsum]

approximate solution, добавил.

[approximate solution]

Lorem Ipsum, А вы хотите что бы у вас контент сжимался в строке и не переносился?

[approximate solution]

Lorem Ipsum, для вашего .col добавьте display: flex; flex-wrap: wrap;

Answer 1

[Юрий]

Потому что на флоатах всё. Белые блоки с бордером по высоте больше на 2 пикселя, чем чёрные. Когда строка переносится, следующие за белыми блоки упираются в них, и получается дырка.

В принципе, флоат так и работает, бутстрап тут ни при чём. Другой вопрос: нафига вам флоаты, если у вас уже есть сетка бутстрапа?

Варианты решения: сделать все блоки одинаковой высоты, переверстать на флексе, переверстать на бутстрап-сетке.