Bootstrap 4 列浮动样式 Bootstrap 3 这可能吗？

Question

我从 bootstrap 4 开始开发，现在我发现了这个问题：当使用 bootstrap 3 列系统时，因为它使用浮点数，我们可以在一行中插入多个列，它会根据指定的 "col-size" 填充 space，像这样：

 -------   -------   -------
| 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>

但是对于 bootstrap 4 flex 系统，每个元素都使用行的整个高度，结果是这样的：

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>

我已经 google 它并为此搜索 bootstrap 4 文档，但我没有找到任何解决方案。我发现的最接近的是卡片柱，一个类似砌体的例子，但我认为它不适用于这个例子，因为我不能指定 columns/cards 宽度。谢谢！

Answer 1

是的，您可以使用实用程序类.

在 Bootstrap 4 中获得 3.x 网格 "float" 行为

使用 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

Bootstrap 4 列浮动样式 Bootstrap 3 这可能吗？

Bootstrap 4 Columns float style like Bootstrap 3 is it possible?

multiple-columns

css-float

dynamic-columns

bootstrap-4