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

【问题标题】：Bootstrap : Is it possible to have rows in columns like this?Bootstrap：是否可以在这样的列中包含行？
【发布时间】：2021-10-05 05:17:00
【问题描述】：

使用 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>

更新（2021 年 8 月 23 日）：使用网格实际上更好。我放弃了引导程序并改用 GRID，它允许定义与 CSS 网格相关的所有属性 (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid)。

HTML 代码：

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Griiiiid!</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 class="centre">Welcome</h1>
    <div class="container">
      <div class="items item1">1</div>
      <div class="items item2">2</div>
      <div class="items item3">3</div>
      <div class="items item4">4</div>
      <div class="items item5">5</div>
      <div class="items item6">6</div>
    </div>
  </body>
</html>

CSS 代码：

*,
::before,
::after {
  box-sizing: border-box;
}
body {
  background-color: #333;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
  color: salmon;
}

.centre {
  text-align: center;
}

.container {
  padding: 30px ;
  width: 100%;
  background-color: #eee;
  margin: 30px auto;

  display: grid;
  grid-template-rows: 150px;
  grid-template-columns: repeat (3, 150px);

  grid-auto-rows: 150px;

  gap: 30px;
}

.items {
  padding: 20px;
  font-size: 30px;
  font-family: sans-serif;
}

.item1 {
  background-color: lightcoral;
}
.item2 {
  grid-row: 1/3;
  grid-column: 2/4;
  background-color: lightgreen;
}
.item3 {
  background-color: lime;
}
.item4 {
  background-color: chocolate;
}
.item5 {
  background-color: darkgoldenrod;
}
.item6 {
  background-color: darkseagreen;
}

结果：

【问题讨论】：

你能发布呈现的 HTML 而不是 React 标记吗？

标签： html css bootstrap-4 layout grid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

.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>

【讨论】：