使用 Bootstrap 5 排列多个“盒子”

Question

我想到了一个容器（盒子“1”），它将在水平网格中包含两个相等的盒子（盒子“A”和盒子“B”）。 盒子“A”和盒子“B”各包含三个盒子（盒子“2”、盒子“3”、盒子“4”）和 （方框“5”、方框“6”、方框“7）再次位于水平网格中。 （希望提供的图像是可见的）

问题是，我根本不理解 和 规则。我用了很多不同的组合，我的妻子认为她是寡妇。

有人可以帮我解决这个问题吗？

非常感谢 -保罗-

Answer 1

每个

row

有 12 列。要指定子项的大小，请使用类

col-

后跟列数。有时类名称中的

-md-

用于屏幕尺寸 (https://getbootstrap.com/docs/5.0/layout/breakpoints/)。每个

row

都必须位于

container

中。

.col-4 {
  border:2px solid green;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container">
  <div class="row" style="border:2px solid red">
    <div class="col-6 container" style="border:2px solid blue">
      <div class="row">
        <div class="col-4">Box2</div>
        <div class="col-4">Box3</div>
        <div class="col-4">Box4</div>
      </div>
    </div>
    <div class="col-6 container" style="border:2px solid blue">
      <div class="row">
        <div class="col-4">Box5</div>
        <div class="col-4">Box6</div>
        <div class="col-4">Box7</div>
      </div>
    </div>
  </div>
</div>