Bootstrap 是一个流行的基于 HTML、CSS 和 JS 的前端框架，可以用来快速构建响应式布局的网站。在 Bootstrap 中，多列布局可以让网站拥有更加灵活的展示方式。然而，在小屏幕设备上使用多列布局，可能会出现布局不整齐的问题。那么如何在 Bootstrap 框架中调整多列布局以适配小屏幕呢？本文将详细探讨这个问题，并给出相应的示例代码。
问题描述
在 Bootstrap 中，多列布局可以使用栅格系统进行实现。通过指定不同的 col-*-* 类，可以把页面分成不同数量的列，并根据屏幕尺寸进行响应式展示。例如，下面的代码定义了一个在大屏幕上占据一半宽度，在小屏幕上占据全部宽度的两列布局：
<div class="row"> <div class="col-lg-6 col-xs-12">列 1</div> <div class="col-lg-6 col-xs-12">列 2</div> </div>
这段代码在大屏幕上显示为两列，每列占据了页面的一半宽度。在小屏幕上则显示为一列，每列占据了全部的宽度。这种布局在大屏幕上看起来很好，但在小屏幕上就不是那么理想了。当屏幕变得越来越小时，每列的宽度会不断缩小，最终变得难以阅读和显示。
解决方案
解决这个问题的方法是对多列布局进行调整，以适应小屏幕设备。我们可以使用以下的步骤来完成这个调整：
- 在小屏幕设备上折叠多个列，使它们转换为一列布局。
- 在多个小屏幕设备上对每个列进行重构，以优化布局。
折叠多个列
Bootstrap 的栅格系统有一个很方便的功能，就是可以使用 col-*-offset-* 类来设置列的偏移量。例如，下面的代码将第一个列在大屏幕上偏移了 2 格，使得它距离左侧边界远了一些：
<div class="row"> <div class="col-lg-4 col-xs-12 col-xs-offset-0 col-lg-offset-2">列 1</div> <div class="col-lg-4 col-xs-12">列 2</div> </div>
为了在小屏幕设备上折叠多个列，我们可以把每个列的偏移量设置为 0，并添加一个 col-xs-12 类。这样做将会让每个列都占据了整个屏幕的宽度，并且都显示在一列里。例如，下面的代码在小屏幕设备上会把两个列折叠成一列布局：
<div class="row"> <div class="col-lg-4 col-xs-12 col-lg-offset-2 col-xs-offset-0">列 1</div> <div class="col-lg-4 col-xs-12 col-lg-offset-0 col-xs-offset-0">列 2</div> </div>
在小屏幕设备上重构布局
当我们折叠多个列之后，页面在小屏幕设备上只有一列宽度。这时，我们可以对每列进行单独的重构，以保证每列可以在小屏幕上看起来更加整齐。以下是一些可以考虑的重构方式：
将多个列合并成一个列。如果一些列是相关联的，或者需要在小屏幕上进行组合，我们可以考虑把它们合并成一个列。例如，下面的代码将两个列合并成了一个列，并以列表的形式展示：
<div class="row"> <div class="col-xs-12"> <ul> <li>列 1</li> <li>列 2</li> </ul> </div> </div>更改列的顺序。如果需要改变一些列的顺序，以保证它们在小屏幕上更加整齐，我们可以使用
col-*-push-*和col-*-pull-*类来进行调换。例如，下面的代码改变了两个列的顺序：<div class="row"> <div class="col-xs-12 col-lg-8 col-lg-push-4">列 1</div> <div class="col-xs-12 col-lg-4 col-lg-pull-8">列 2</div> </div>
调整列的宽度。如果一些列在小屏幕上看起来太小或者太拥挤，我们可以调整它们的宽度。这可以通过改变
col-*-*类来实现。例如，下面的代码将一个列在小屏幕上的宽度改为了col-xs-12：<div class="row"> <div class="col-xs-12 col-lg-8">列 1</div> <div class="col-xs-12 col-lg-4">列 2</div> </div>
示例代码
下面的示例代码演示了如何对多列布局进行调整，以适应小屏幕设备。这个示例包含了三个列，当屏幕宽度大于等于 992px 时，显示为三列布局；而在小于 992px 时，折叠成一列布局，并对每列进行重构。每个重构步骤都有相应的注释。
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ------------ - ------------- ---
---- ---------------- ----------- -------
---- ------------ - ------------- ---
---- ---------------- ----------- -------
---- ------------ - ------------- ---
---- ---------------- ----------- -------
------
---- ------------
---- ------------------- ------------ ---
---- ---------------- --------------- -----------------
---- ----------------------- ---
----
----- ------
----- ------
----- ------
-----
------
------
---- ------------
---- ------------------- ------------ ---
---- ---------------- --------------- -----------------
---- --------------------------- ---
---- ---------------- -------- ---------------- -------
---- ---------------- -------- ---------------- -------
------
------
---- ------------
---- ------------------- ------------ ---
---- ---------------- --------------- -----------------
---- ------------------ ---
---- ---------------- ----------- -------
---- ---------------- ----------- -------
------
------
------总结
本文介绍了如何在 Bootstrap 框架中调整多列布局，以适应小屏幕设备。在实现这个过程时，我们首先可以折叠多个列，使它们转换成一列布局。然后，我们可以使用不同的方法，对每列进行重构，以使它们在小屏幕上显示更加整齐。这个过程需要一些细致的调整和布局，但通过实践和调试，我们可以很容易地实现一个响应式的多列布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a34332add4f0e0ffb60168