CSS Bootstrap中的固定包装器网格 – 防止列堆叠

在本文中，我们将介绍如何使用CSS和Bootstrap的固定包装器网格来防止列的堆叠。堆叠是指当屏幕宽度不足以容纳多个列时，这些列会自动在移动设备上堆叠在一起。通过使用固定包装器网格，我们可以确保列始终保持在同一行上，无论屏幕宽度如何。

阅读更多：CSS 教程

什么是固定包装器网格？

固定包装器网格是Bootstrap提供的一种布局工具，用于创建响应式的网页布局。它使用CSS Flexbox和媒体查询来根据屏幕宽度自动调整列的宽度和位置。在默认情况下，当屏幕宽度不足以容纳所有列时，它们将自动堆叠在一起。然而，有时我们希望保持所有列始终在同一行上，而不是堆叠。这就是使用固定包装器网格的时候。

如何防止列的堆叠？

要防止列的堆叠，我们可以使用Bootstrap的row和col-*-*类来定义我们的列。我们需要做的是在外部容器上使用row类，并在每个列上使用适当的col类。然后，我们可以根据需要将固定宽度的wrapper类应用于外部容器。

示例代码如下所示：

<div class="wrapper">
  <div class="row">
    <div class="col-sm-6">
      <p>这是第一列</p>
    </div>
    <div class="col-sm-6">
      <p>这是第二列</p>
    </div>
  </div>
</div>

在上面的示例中，我们使用了col-sm-6类来定义每个列的宽度为50%。通过将这些列放在名为row的容器中，它们将被放置在同一行上。然后，通过将wrapper类应用于外部容器，我们可以确保这些列不会在较窄的屏幕上堆叠。

修改固定包装器网格的参数

Bootstrap提供了各种类于使用固定包装器网格的设置，可以根据自己的需求进行修改。以下是一些常用的类和用法：

container: 默认的包装器类，用于创建响应式布局。使用此类时，列将根据屏幕宽度自动适应宽度和位置。
container-fluid: 用于创建全屏宽度的包装器。使用此类时，列不会受到固定宽度限制。
row: 行类用于容纳列。将列放在行内可以确保它们在同一行上。
col-*-*: 列类用于定义列的宽度和位置。第一个星号表示列在小屏幕上的宽度，第二个星号表示列在中等屏幕上的宽度。常用的屏幕宽度包括xs（手机）、sm（平板）、md（小型台式电脑）和lg（大型台式电脑）。
wrapper: 用于自定义固定包装器网格的类。通过将此类应用于外部容器，可以实现自定义的固定包装器效果。

示例说明

假设我们有两个列，我们希望它们始终在同一行上，而不是在较窄的屏幕上堆叠。我们可以使用以下示例代码来实现这一点：

<div class="wrapper">
  <div class="row">
    <div class="col-sm-6">
      <p>这是左侧的列</p>
    </div>
    <div class="col-sm-6">
      <p>这是右侧的列</p>
    </div>
  </div>
</div>

在上面的代码中，我们使用了col-sm-6类来定义每个列的宽度为50%。通过将这些列放在名为row的容器中，它们将始终在同一行上。最后，通过将wrapper类应用于外部容器，我们确保列不会在较窄的屏幕上堆叠。