i start developing with bootstrap 4 and now i found this problem : when using bootstrap 3 column system, because it uses float, we could insert multiple columns inside a row and it wold fill the space depending on the "col-size" specified, like this :
http://codepen.io/seltix/pen/QpXvRJ
------- ------- -------
| COL 1 | | COL 2 | | COL 3 |
| | ------- -------
| | | COL 4 | | COL 5 |
------- ------- -------
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 panel height-1">
<div class="bg-danger">this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div>
</div>
<div class="col-sm-3 panel height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 panel height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 panel height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 panel height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 panel height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
</div>
but with the bootstrap 4 flex system each element uses the full height of the row and the result is this :
http://codepen.io/seltix/pen/PprmVE
------- ------- -------
| COL 1 | | COL 2 | | COL 3 |
| | ------- -------
| |
------- -------
| COL 4 | | COL 5 |
------- -------
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 card height-1">
<div class="bg-danger">this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div>
</div>
<div class="col-sm-3 card height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 card height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 card height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 card height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-sm-3 card height-2">
<div class="bg-info">blue boxes count may change depending on the content.<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
</div>
i already google it and search on bootstrap 4 documentation for this but i dont find any solution. the closest i cound was card-columns, a masonry-like example but i dont think it work for this example since i cant specify the columns/cards width. thanks!
Yes, you can get 3.x grid "float" behavior in Bootstrap 4 using the utility classes.
Use d-block to change the row from display:flex to display:block. Then use float-left on each col..
http://www.codeply.com/go/BmN6ZYQdGm
<div class="row d-block">
<div class="col-md-6 float-left card height-1">
<div class="bg-danger">1
<br>this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div>
</div>
<div class="col-md-3 float-left card height-2">
<div class="bg-info">2
<br>blue boxes count may change depending on the content.
<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-md-3 float-left card height-2">
<div class="bg-info">3
<br>blue boxes count may change depending on the content.
<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-md-3 float-left card height-2">
<div class="bg-info">4
<br>blue boxes count may change depending on the content.
<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-md-3 float-left card height-2">
<div class="bg-info">5
<br>blue boxes count may change depending on the content.
<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
<div class="col-md-3 float-left card height-2">
<div class="bg-info">6
<br>blue boxes count may change depending on the content.
<br>if there are only 1 blue box the col size will change from 3 to 6 in the PHP</div>
</div>
</div>
http://www.codeply.com/go/BmN6ZYQdGm
Related: Bootstrap 4 - I don't want columns to have the same height
来源：https://stackoverflow.com/questions/43285745/bootstrap-4-columns-float-style-like-bootstrap-3-is-it-possible