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中文网其他相关文章！
