Question

这可能已经发布但我找不到。我试图连续获得3列以获得更小（50％中间列和25％左右），而不是像bootstrap一样堆叠在一起，使用以下代码：

<div class="row">
    <div class="col">
      25%
    </div>
    <div class="col">
      50%
    </div>
    <div class="col">
      25%
    </div>
</div>

bootstrap的网格系统是支持这个还是我必须自己做？

Answer 1

您可以使用auto-layout cols，并将其与预定义的网格结合使用。

flexbox网格列的自动布局还意味着您可以设置一列的宽度，并让兄弟列自动调整其大小。

https://www.codeply.com/go/XwEJzauAam

col-6 == 50％

<div class="row">
    <div class="col">
      25%
    </div>
    <div class="col-6">
      50%
    </div>
    <div class="col">
      25%
    </div>
</div>

这些col和col-* 不会叠加。

堆叠（响应）列（断点）是..

col-sm和col-sm-* - 576px
col-md和col-md-* - 768px
col-lg和col-lg-* - 992px
col-xl和col-xl-* - 1200px

Bootstrap 4 - 3行，具有不同的宽度，当屏幕变小时不会堆叠

1 个答案: