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