bootstrap-4 - 请向我解释此特定示例的 Bootstrap 网格的行为

Question

我正在学习 bootstrap ver 4.4.1 并试图理解这段代码

<div class="container">
<div class="row">
<div class="col">1</div>               <!--First line-->
<div class="col-sm">2</div>            <!--Second line-->        
<div class="col">3</div>               <!--Third line--> 
</div>
</div>

对于 <576px 的断点，我得到 3 个垂直堆叠的行，横跨整个容器。然而，根据引导自动列布局，第一行中的 col 和第三行中的 col 应分别为第一行和第三行形成 col-6，并且应显示第一行 col 的 50% 宽度和 col 第三行的 50% 宽度以及第 2 行中列的整个跨度

以及为什么当我们处于 >= 576px 的小型设备的断点时它在水平位置显示 3 列，有人可以解释我的输出与我预期的偏差。我正在附加原始输出的图像，我的预期输出 .image 在这里

标签： bootstrap-4bootstrap-grid

Answer 1

简单的答案是：因为它应该是这样工作的。

然而，根据引导自动列布局，第一行中的 col 和第三行中的 col 应分别为第一行和第三行形成 col-6，并且应显示第一行中 col 的 50% 宽度和第三行 col 的 50% 宽度以及第 2 行中列的整个跨度

我不确定我是否正确理解了您，但这不是colvscol-sm的工作方式。它们不是它们占据多少宽度的指标，而只是何时应该考虑它们。

col并且col-sm都尝试根据flexbox中的其他元素调整它们的大小。但col-sm仅对断点sm及更高级别执行此操作。这就是为什么您将三个水平列设置为sm更高的原因（所有三个列都是 flexbox 的一部分，并且假定宽度和布局相同）。

一旦你进入xs类col-sm“失去”它的 flexbox 属性并且不再相对于 flex 元素（第 1 列和第 3 列）调整大小，而是假设宽度为 100%。这反过来又导致其他两列也自动调整到 100%，因为它们不再可以自动布局到 33%。

要获得您想要的结果，您必须使用 实际指定列的宽度col-*。

<div class="container">
  <div class="row">
    <div class="col-6">1</div>
    <div class="col-12">2</div>
    <div class="col-6">3</div>
  </div>
</div>