如何在 Bootstrap 中创建不相等的列？

在使用 Bootstrap 的过程中，我们经常会需要在同一行中创建几个不同宽度的列，这时我们可以使用 Bootstrap 提供的栅格系统来轻松实现不相等的列布局。

栅格系统

Bootstrap 的栅格系统是一种为网格化布局而设计的灵活的系统。它包含了响应式布局的多种类接口，如12列、6列、4列等等。所有这些列都可以通过行（row）进行包裹（wrap）。

创建不相等的列

我们可以通过 Bootstrap 提供的 col-* 类来创建不同宽度的列。col-* 类中的 * 表示列的宽度，取值范围为 1 到 12。例如，如果我们想要创建一个宽度为 6 的列，可以使用 col-6 类。

以下是一个基本的例子：

<div class="row">
  <div class="col-3">列 1</div>
  <div class="col-6">列 2</div>
  <div class="col-3">列 3</div>
</div>

在这个例子中，我们创建了一个包含三列的行。第一列的宽度为 3，第二列的宽度为 6，第三列的宽度为 3。

响应式设计

Bootstrap 的栅格系统支持响应式设计，这意味着我们可以根据不同的屏幕宽度来自动调整列的宽度。为此，Bootstrap 提供了若干个响应式断点，我们可以使用 col-*-* 类来在不同的断点下设置不同宽度的列。

以下是一个例子：

<div class="row">
  <div class="col-md-3 col-sm-6">列 1</div>
  <div class="col-md-6 col-sm-6">列 2</div>
  <div class="col-md-3 d-none d-md-block">列 3</div>
</div>

在这个例子中，我们在大屏幕下（如 PC）将第一列的宽度设置为 3，将第二列的宽度设置为 6，将第三列隐藏。在小屏幕下（如手机）将第一列和第二列的宽度都设置为 6，并将第三列显示。

结论

通过使用 Bootstrap 的栅格系统，我们可以轻松创建不相等的列布局，还可以支持响应式设计，以适应不同的屏幕大小。