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

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，并将其与 pre-defined 网格组合。

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

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 列不同宽度的行，当屏幕变小时不会堆叠

Bootstrap 4 - 3 cols in row with different widths that don't stack when screen gets smaller

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4