如何在 Bootstrap 的侧边栏中将两列放在另一列之下？

背景

在使用 Bootstrap 构建页面时，我们可能需要在侧边栏中嵌套多个列。默认情况下，这些列会在同一行显示，但有时候我们需要将其中的两列放在另一列的下方。那么，该怎样实现呢？

解决方案

通过使用 Bootstrap 的栅格系统，我们可以很容易地实现将两列放在另一列之下。具体步骤如下：

1. 在侧边栏中添加一个容器(div)元素，并设置该元素的类(class)为row，表示该元素包含一个栅格系统的行。

<div class="row">
  <!-- 这里是栅格系统的列 -->
</div>

2. 在该容器元素中添加三个列(col)元素，并设置它们的类(class)为col-*，其中*表示该列元素占据的宽度比例。通常情况下，我们将其中两个列元素的宽度比例设置为相同的值，将另一个设置为较大的值。

<div class="row">
  <div class="col-6">
    <!-- 这里是第一个列 -->
  </div>
  <div class="col-6">
    <!-- 这里是第二个列 -->
  </div>
  <div class="col-12">
    <!-- 这里是第三个列 -->
  </div>
</div>

3. 将需要放在另一列下方的两个列元素放置在第一个和第二个列元素中。

<div class="row">
  <div class="col-6">
    <div>
      <!-- 这里是需要放在下方的列 -->
    </div>
  </div>
  <div class="col-6">
    <div>
      <!-- 这里是需要放在下方的列 -->
    </div>
  </div>
  <div class="col-12">
    <div>
      <!-- 这里是第三个列 -->
    </div>
  </div>
</div>

这样，两个需要放在下方的列就会自动占据两列的宽度比例，而第三个列则会占据整个行的宽度。

总结

通过使用 Bootstrap 的栅格系统，我们可以很容易地将两个列放在另一个列的下方，实现网页的布局。注意，在实际应用中，我们需要根据页面的具体需求来设置每个元素的类(class)以及宽度比例。