Bootstrap 框架中如何调整多列布局以适配小屏幕

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>

这段代码在大屏幕上显示为两列，每列占据了页面的一半宽度。在小屏幕上则显示为一列，每列占据了全部的宽度。这种布局在大屏幕上看起来很好，但在小屏幕上就不是那么理想了。当屏幕变得越来越小时，每列的宽度会不断缩小，最终变得难以阅读和显示。

解决方案

解决这个问题的方法是对多列布局进行调整，以适应小屏幕设备。我们可以使用以下的步骤来完成这个调整：

1. 在小屏幕设备上折叠多个列，使它们转换为一列布局。
2. 在多个小屏幕设备上对每个列进行重构，以优化布局。

折叠多个列

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 时，折叠成一列布局，并对每列进行重构。每个重构步骤都有相应的注释。

<div class="container">
  <div class="row">
    <!-- 第一列，在大屏幕上宽度为 4 格，在小屏幕上占据全部宽度 -->
    <div class="col-xs-12 col-lg-4">列 1</div>
    <!-- 第二列，在大屏幕上宽度为 4 格，在小屏幕上占据全部宽度 -->
    <div class="col-xs-12 col-lg-4">列 2</div>
    <!-- 第三列，在大屏幕上宽度为 4 格，在小屏幕上占据全部宽度 -->
    <div class="col-xs-12 col-lg-4">列 3</div>
  </div>
  <div class="row">
    <!-- 在小屏幕设备上，将每个列的偏移量设置为 0，使它们折叠成一列布局 -->
    <div class="col-xs-12 col-lg-offset-0 col-xs-offset-0"> 
      <!-- 重构第一列，将它们合并成一个列，并使用列表展示 -->
      <ul>
        <li>列 1</li>
        <li>列 2</li>
        <li>列 3</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <!-- 在小屏幕设备上，将每个列的偏移量设置为 0，使它们折叠成一列布局 -->
    <div class="col-xs-12 col-lg-offset-0 col-xs-offset-0">
      <!-- 重构第二列，将它们改变顺序，并且在小屏幕上占据全部宽度 -->
      <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>
  </div>
  <div class="row">
    <!-- 在小屏幕设备上，将每个列的偏移量设置为 0，使它们折叠成一列布局 -->
    <div class="col-xs-12 col-lg-offset-0 col-xs-offset-0">
      <!-- 重构第三列，将它们在小屏幕上分成两列 -->
      <div class="col-xs-12 col-sm-6">列 1</div>
      <div class="col-xs-12 col-sm-6">列 2</div>
    </div>
  </div>
</div>

总结

本文介绍了如何在 Bootstrap 框架中调整多列布局，以适应小屏幕设备。在实现这个过程时，我们首先可以折叠多个列，使它们转换成一列布局。然后，我们可以使用不同的方法，对每列进行重构，以使它们在小屏幕上显示更加整齐。这个过程需要一些细致的调整和布局，但通过实践和调试，我们可以很容易地实现一个响应式的多列布局。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a34332add4f0e0ffb60168