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

【问题标题】：Bootstrap 4 - 3 cols in row with different widths that don't stack when screen gets smallerBootstrap 4 - 3 行中不同宽度的列，当屏幕变小时不会堆叠
【发布时间】：2018-02-22 22:03:20
【问题描述】：

这可能已经发布了，但我找不到。我试图让一行中的 3 列变得更小（50% 的中间列和 25% 的左右），而不是像 bootstrap 已经用以下代码那样堆叠在一起：

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

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

【问题讨论】：

这些永远不会相互叠加

标签： css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案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-* - 12 >

【讨论】：

因为它是一个 12 格系统，所以其他 col 应该是 col-3。您还需要指定在哪些屏幕上，例如在小屏幕 col-sm-3 上。
不，我不知道。阅读auto layout。
@MarcHjorthLaustsen V4 是移动优先的，所以它适用于移动及更高版本
谢谢，但是使用他们的网格系统，当屏幕较小时，列会相互堆叠，但无论屏幕大小如何，我都试图让它们全部排成一行 --- -- 没关系，我忘了添加一些东西
我很困惑，因为我在中间列中有一个容器，它不像顶部和底部的内容那样响应。