Bootstrap 4列可以像Bootstrap 3一样使用float类型吗？

Question

我开始用bootstrap 4开发，现在我发现这个问题：当使用bootstrap 3列系统时，因为它使用float，我们可以在一行内插入多个列，并根据“col-size”填充空间，指定，例如：

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> 

但与自举4弯曲系统中的每个元素使用行的全部高度，其结果是这样的：

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> 

我已经谷歌它和搜索引导4文档为此，但我没有找到任何解决方案。最近我发现了卡列，一个砖石般的例子，但我不认为它适用于这个例子，因为我不能指定列/卡的宽度。 谢谢！

Answer 1

是的，您可以使用实用程序类在Bootstrap 4中获得3.x网格“浮动”行为。

使用d-block将行从display：flex更改为display：block。然后使用每个山坳float-left ..

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