如何防止 Bootstrap 网格列堆叠在固定宽度容器中？

Bootstrap 网格系统：使用固定包装器克服列堆叠

Bootstrap 的网格系统是网页设计中用于创建响应式布局的基本组件。但是，当使用固定宽度容器时，网格内的列可以在较小的浏览器尺寸下垂直堆叠。

问题：

使用固定宽度包装器时在 Bootstrap 3 中，当调整浏览器窗口大小时，即使包装器本身保持相同大小，网格列也会折叠并堆叠在一起。

解决方案：使用非堆栈类

为了防止列在固定宽度容器中堆叠，Bootstrap 提供了一组“非堆叠”类。这些类使用媒体查询来覆盖特定屏幕分辨率下的默认堆叠行为。

在 Bootstrap 3 中，非堆叠类以 col-xs- 为前缀。这些类可以应用于列，以防止它们在较小的屏幕尺寸下折叠。

示例：

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div></code>

在此示例中，列将保持在侧面 -即使在最小的屏幕尺寸下也是如此。

Bootstrap 4 更新：

在 Bootstrap 4 中，非堆栈类的概念已被简化。不再需要 xs 前缀。相反，默认行为是防止列堆叠。为了确保列保持并排，只需使用标准 col 类（例如 col-4）。

以上是如何防止 Bootstrap 网格列堆叠在固定宽度容器中？的详细内容。更多信息请关注PHP中文网其他相关文章！