在 "row row-cols-*" 内部，当有兄弟 "col-*" 时确定 "col" 的宽度答案

【问题标题】：Inside "row row-cols-*", width determination for "col" when there's sibling "col-*"在 "row row-cols-*" 内部，当有兄弟 "col-*" 时确定 "col" 的宽度
【发布时间】：2022-01-14 09:30:29
【问题描述】：

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

我认为上面的代码会产生与

相同的结果

<div class="container">
  <div class="row row-cols-4">
    <div class="col-2">Column</div>
    <div class="col-2">Column</div>
    <div class="col-6">Column</div>
    <div class="col-2">Column</div>
  </div>
</div>

但实际上和

的结果是一样的

<div class="container">
  <div class="row row-cols-4">
    <div class="col-3">Column</div>
    <div class="col-3">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

我不明白为什么。

The documentation of .row-cols-* 说

使用响应式 .row-cols-* 类快速设置最能呈现您的内容和布局的列数。

所以我想：

row-cols-4 表示 1 行应该有 4 个 <div class="col">（或 col-*）。
第三个 div 具有 col-6，因此其宽度将是父容器的 50%（12 个中的 6 个）。
另外 3 个<div class="col"> 平分剩余 50% 的宽度。

但事实是第 4 个 div 换行，将前 3 个 div 留在第一行，其中前 2 个各占水平空间的 25%。

有人可以帮我解释一下吗？我是不是误解了row-cols-4的意思？

【问题讨论】：

标签： bootstrap-grid

【解决方案1】：

这是一个常见的误解。

row-cols-* 设置行上的列。

例如：row-cols-4 意味着row 应分为 4 列，因此每列将隐含为col-3。现在，当您执行 row-cols-4 并将 col、col、col-6 和 col 放入其中时，您将给第三列 (col-6) 分配给排。现在您认为这会将剩余的 6 列分配到 3 中，并将 2 分配给剩余的每一列。事实并非如此。其他列仍然有 3 个列空间。因为这是我们在做row-cols-4 时指定的最低限度。任何额外的东西都会被包裹起来，就像它正在做的那样。

我希望这可以解决问题。

【讨论】：