Bootstrap Сетка не заполняет пустое место

Question

https://prnt.sc/sa63wm

Вы можете видеть на скриншоте

Как заполнить пустое место элементами div? Я попробовал display: inline-block или другие вещи отображения. Они не работали.

<div class="row">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-9">
    </div>
</div>

Answer 1

Сетка Bootstrap имеет ровно 12 единиц столбца. Всякий раз, когда вы превысите 12, он перенесет его в новый ряд. Это работает, но вы должны превышать 12 столбцов в одной строке.

Поэтому вместо того, чтобы делать это выше, вы должны go с:

<div class="row">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
    </div>
</div>
<div class="row">
 ... next columns

Если вы хотите, чтобы все они были в row, вам, вероятно, следует использовать только одну строку, а затем поместить другой контент вертикально, так как ваш первый столбец очень высокий.