如何使用 bootstrap 4 获取这种类型的 div 容器？

Question

我搜索了 bootstrap 容器类，在我看来，默认情况下它带有这个网格。 但是它没有像这张图片中显示的那样给我所有三个，当我在浏览器中运行这段代码时，它只显示了一个。 我在里面添加了内容。

<div class="container">
  <!-- Content here -->
</div>

Answer 1

您需要了解引导网格系统才能做到这一点。

代码

 .row { margin-top: 10px; } .data-row { height: 150px; } .first, .second-1, .second-2 { border: solid 1px #6c757d; border-radius: 5px; padding: 10px; text-align: center; } .first { background-color: #daeeff; } .second-1 { background-color: #957bbe; margin-right: 10px; } .second-2 { background-color: #fae3c4; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col first"> first </div> </div> <div class="row data-row"> <div class="col-10 second-1"> second </div> <div class="col second-2"> menu </div> </div> </div>