Bootstrap : 是否可以像这样在列中有行？

Question

with 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 日）：它实际上更好用网格。我放弃了 bootstrap 并改用 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;
}

结果：

Answer 1

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

的一部分

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

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

Bootstrap : 是否可以像这样在列中有行？

Bootstrap : Is it possible to have rows in columns like this?

html

css

grid

layout

bootstrap-4