Bootstrap Grid 不会填满空的地方

Question

https://prnt.sc/sa63wm

You can see on the screenshot

How can i fill the empty place with div elements? I tried display:inline-block or the other display things. They didnt work.

<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's grid has excatly 12 column units. Whenever you exceed 12, it will wrap it in a new row. It works, but you should exceed 12 columns in one row.

So instead of doing it above, you should go with:

<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

If you want to have them all in row, you should probably use only one row and then put your other content vertically, as your first column is very tall.