Bootstrap：是不是可以在这样的列中包含行？
Posted
技术标签:
【中文标题】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>
ty
更新（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 标记吗？ 【参考方案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>【讨论】：
以上是关于Bootstrap：是不是可以在这样的列中包含行？的主要内容，如果未能解决你的问题，请参考以下文章