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

Question

<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-* 说

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout.

所以我想：

1. row-cols-4 表示 1 行应该有 4 个 <div class="col">（或 col-*）。
2. 第三个 div 有 col-6，所以它的宽度是父容器的 50%（12 个中有 6 个）。
3. 其他 3 <div class="col"> 平分剩余的 50% 宽度。

但事实是第4个div换行，第一行留下前3个div，其中前2个各占横向的25%space .

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

Answer 1

这是一个常见的误解。

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

所以例如：row-cols-4 意味着 row 应该被分成 4 列，因此每一列都隐含地是一个 col-3.现在，当您执行 row-cols-4 并将 col、col、col-6 和 col 放入其中时，您将给出第 3 列（col-6) 分配给行中每一列的内容的两倍。 现在你想到的是这会将剩余的 6 列分配到 3 并将 2 分配给每个列剩余的。事实并非如此。其他列仍然获得 3 列空间。因为那是我们在 row-cols-4 时指定的最小值。任何额外的东西都会像现在一样包装。

我希望这能解决一些问题。