以 Bootstrap 将 div 拆分为2行

当我们需要将一个div拆分为两行时，最好的方法是使用 Bootstrap 的网格系统。网格系统使用CSS中的display:flex，使得布局更加灵活。在下面的代码片段中，我们将展示如何使用Bootstrap将一个div拆分为两行。

HTML代码

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Bootstrap将Div拆分为两行</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <p>这是第一行的文本内容</p>
    </div>
    <div class="col-md-6">
      <p>这是第二行的文本内容</p>
    </div>
  </div>
</div>

解释

1. 我们使用了一个容器（container）元素，这是Bootstrap的一个基本元素，用于固定页面宽度和为页面提供padding。

2. 在容器元素内，我们有两个div元素，它们分别使用了.row类。这个类用于指定使用网格系统。

3. 在第一个.row元素内，我们有一个.col-md-12元素。这个元素占据整个屏幕宽度，用于显示页面标题。

4. 在第二个.row元素内，我们有两个.col-md-6元素。这个元素占据页面一半的宽度，因此我们将这个div拆分成了两行。

结论

可以看到，在HTML代码中，我们使用了Bootstrap的网格系统将一个div拆分成了两行。这个方法非常简单而且直观，可以用来创建各种类型的布局。