Bootstrap：是否可以在这样的列中包含行？

2024-05-10 • 问答

使用 Bootstrap 及其布局系统，可以在列中设置行来产生这种类型的结果：

我试过了，但没有成功：

<div classname="col-lg-3 col-12">
    <div classname="row">
        <displaySquare  />
    </div>
    <div classname="row">
        <displaySquare  />
    </div>
    <div classname="row">
        <displaySquare  />
    </div>
</div>

<div classname="col-lg-9 col-12">
    <div classname="row">
        <displayBigSquare   />
    </div>
    <div classname="row">
        <displaySquare  />
        <displaySquare  />
    </div>
</div>

从 Bootstrap v5.0.2 开始，答案是否定的。问题是，为了让示例中的橙色矩形跨越多个“行”，您需要使用 CSS 网格样式，而这还不是 Bootstrap 的一部分。

然而，很快在 v5.1.0 中，他们包含了一个选择加入选项，以用基于 CSS 网格的网格系统代替他们目前使用的基于 flexbox 的网格系统。它可能会有一些成长的痛苦，我不确定他们是否支持你在这里尝试做的事情，但至少 CSS Grid 会在那里尝试。将添加有关如何启用该选项以及在该版本上线后如何使用它的文档，但您可以在此期间通读 feature's PR。

如果您想要精确的布局，则必须分两行进行：

正方形底部的边距需要等于您的装订线的两倍

.square {
  width: 100%;
  padding-top: 100%;
  background: orange;
  margin-bottom: 30px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="square"></div>
      <div class="square"></div>
    </div>
    <div class="col-8">
      <div class="square"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="square"></div>
    </div>
    <div class="col-4">
      <div class="square"></div>
    </div>
    <div class="col-4">
      <div class="square"></div>
    </div>
  </div>
</div>

Bootstrap：是否可以在这样的列中包含行？

hufu1971 回答：Bootstrap：是否可以在这样的列中包含行？

大家都在问