Bootstrap 4像Bootstrap 3一样的浮标样式吗? [英] Bootstrap 4 Columns float style like Bootstrap 3 is it possible?

问题描述

我开始使用Bootstrap 4进行​​开发，现在我发现了这个问题: 当使用bootstrap 3列系统时，因为它使用浮点数，我们可以在一行中插入多列，并根据指定的"col-size"填充空间，如下所示:

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>

但是使用bootstrap 4 flex系统，每个元素都使用该行的全部高度，结果是这样的:

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>

我已经用google搜索并搜索了bootstrap 4文档，但是我没有找到任何解决方案.我最接近的是卡片列，这是一个类似砖石的示例，但由于我无法指定列/卡片的宽度，因此我认为它不适用于该示例. 谢谢！

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!

推荐答案

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

Yes, you can get 3.x grid "float" behavior in Bootstrap 4 using the utility classes.

使用d-block将行从display:flex更改为display:block.然后在每个列上使用float-left.

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

相关: Bootstrap 4-我不希望列具有相同的高度

这篇关于Bootstrap 4像Bootstrap 3一样的浮标样式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！