Bootstrap4 网格系统详细介绍

什么是 Bootstrap 网格系统？

Bootstrap 网格系统提供了一种简单而强大的方式来创建各种形状和大小的响应式布局。它是用flexbox构建的，采用移动优先的方法。此外，它完全响应并使用 12 列系统（每行 12 列可用）和六个默认响应层。

Bootstrap 4 包含预定义的网格类，我们可以为不同类型的设备（如手机、平板电脑、笔记本电脑、台式机等）快速制作布局。例如，可以使用这些.col-*类为超小型的纵向模式的手机创建网格列，.col-sm-*类为横向模式的手机创建网格列。

同样，我们可以使用这些.col-md-*类为平板电脑等中等屏幕设备、.col-lg-*为小型笔记本电脑等设备、.col-xl-*类为笔记本电脑和台式机等设备以及.col-xxl-*类为大型桌面屏幕创建网格列。

下表总结了 Bootstrap 网格系统的主要功能。

由上表可以证明一个重要的事情，应用任何.col-sm-*类的元素不仅会对小型设备产生影响，如果.col-md-*，.col-lg-*，.col-xl-*，或.col-xxl-*类不存在，也会对中型，大型和特大型设备（视口宽度≥768px）产生影响，

同样的，.col-md-*不仅对中型设备产生影响，如果 .col-lg-*，.col-xl-*或.col-xxl-*类是不存在的，也会对大型和特大型设备产生影响。

现在的问题是如何使用这个 12 列响应式网格系统创建行和列。答案很简单，首先创建一个容器，使用容器类，例如.container，在这之后创建使用的容器内的行，.row类，并可以在行中创建任何列 .col-*，.col-sm-* ，.col-md-* ，.col-lg-* 和 .col-xl-*。

列是我们放置内容的实际内容区域。在下面的部分中，我们将把所有这些东西付诸实践，看看它是如何工作的：

创建两列布局

下面的示例将向您展示如何为中型、大型和超大型设备（如桌子、笔记本电脑和台式机等）创建两列布局。但是，在手机（屏幕宽度小于 768 像素）上，列将自动变为水平（2 行） , 1 列）。

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col-md-6">Column left</div>
        <div class="col-md-6">Column right</div>
    </div>
    
    <!--Row with two columns divided in 1:2 ratio-->
    <div class="row">
        <div class="col-md-4">Column left</div>
        <div class="col-md-8">Column right</div>
    </div>
    
    <!--Row with two columns divided in 1:3 ratio-->
    <div class="row">
        <div class="col-md-3">Column left</div>
        <div class="col-md-9">Column right</div>
    </div>
</div>

尝试一下

注意 ：在网格布局中，内容必须放置在列 (.col和.col-*) 内，并且只有列可以是行 ( .row)的直接子项。此外，行应放置在容器（固定或流体）内以进行适当的填充和对齐。

由于 Bootstrap 网格系统是基于 12 列的，因此为了将列保持在一行（即并排），单行内的网格列数之和不应大于 12。如果您仔细观察上面的示例代码就会发现col-md-*每行的网格列数加起来为 12（6+6、4+8 和 3+9）。

创建三列布局

同样，我们可以根据上述原理创建其他布局。例如，以下示例通常会为笔记本电脑和台式机屏幕创建三列布局。如果屏幕分辨率大于或等于 992 像素（例如 Apple iPad），它也适用于横向模式的平板电脑。但是，在纵向模式下，网格列将像往常一样呈水平状。

<div class="container">
    <!--Row with three equal columns-->
    <div class="row">
        <div class="col-lg-4">Column left</div>
        <div class="col-lg-4">Column middle</div>
        <div class="col-lg-4">Column right</div>
    </div>
    
    <!--Row with three columns divided in 1:4:1 ratio-->
    <div class="row">
        <div class="col-lg-2">Column left</div>
        <div class="col-lg-8">Column middle</div>
        <div class="col-lg-2">Column right</div>
    </div>
    
    <!--Row with three columns divided unevenly-->
    <div class="row">
        <div class="col-lg-3">Column left</div>
        <div class="col-lg-7">Column middle</div>
        <div class="col-lg-2">Column right</div>
    </div>
</div>

尝试一下

注意 ：如果在一行中放置了 12 个以上的网格列，那么每组额外的列作为一个整体将换行到一个新行。

Bootstrap 自动布局列

还可以通过简单地使用 class .col为所有设备（x-small、small、medium、large、x-large 和 xx-large）创建等宽的列，而无需指定任何列号。

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
    </div>
    
    <!--Row with three equal columns-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

尝试一下

此外，我们还可以设置一列的宽度，并让同级列在其周围自动调整大小。可以使用预定义的网格类或行内宽度。

如果您尝试以下示例，就会发现一行中的列.col具有相等的宽度。

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
    </div>
    
    <!--Row with three columns divided in 1:2:1 ratio-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col-sm-6">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

尝试一下

使用 Bootstrap 创建多列布局

使用新的 Bootstrap 移动优先 flexbox 网格系统，可以轻松控制我们网站布局在具有不同屏幕或视口尺寸的不同类型设备（如手机、平板电脑、台式机等）上的呈现方式。让我们考虑下图。

在上图中，所有设备中共有 12 个内容框，但其位置根据设备屏幕大小而变化，就像在移动设备中，布局呈现为一个列网格布局，其中 1 列和 12 行相互重叠，而在平板电脑中，它呈现为具有 2 列和 6 行的两列网格布局。

此外，在笔记本电脑和台式机等大屏幕设备中，它呈现为具有 3 列和 4 行的三列网格布局，最后在大型台式机等超大屏幕设备中呈现为具有 4 列和 3 行的四列网格布局。

现在的问题是我们如何使用这个 Bootstrap flexbox 网格系统创建这样的响应式布局。让我们从主要目标设备开始。假设我们的主要目标设备是笔记本电脑或普通台式机。由于我们的笔记本电脑布局有 3 列 4 行，即 3x4 网格布局，因此用于制作这种网格结构的 HTML 代码看起来像这样。

<div class="container-lg">
    <div class="row">
        <div class="col-xl-4"><p>Box 1</p></div>
        <div class="col-xl-4"><p>Box 2</p></div>
        <div class="col-xl-4"><p>Box 3</p></div>
        <div class="col-xl-4"><p>Box 4</p></div>
        <div class="col-xl-4"><p>Box 5</p></div>
        <div class="col-xl-4"><p>Box 6</p></div>
        <div class="col-xl-4"><p>Box 7</p></div>
        <div class="col-xl-4"><p>Box 8</p></div>
        <div class="col-xl-4"><p>Box 9</p></div>
        <div class="col-xl-4"><p>Box 10</p></div>
        <div class="col-xl-4"><p>Box 11</p></div>
        <div class="col-xl-4"><p>Box 12</p></div>
    </div>
</div>

尝试一下

提示 ： .container-lg 类使得容器宽100％，如果视区的宽度小于992px，从而利用在小屏幕上全部可用的宽度。

网格列的嵌套

Bootstrap 网格列也是可嵌套的，这意味着您可以将行和列放在现有列中。但是，放置列的公式是相同的，即单行中列号的总和应等于或小于 12。

<div class="container">
    <div class="row">
        <div class="col-sm-8">Column left</div>
        <div class="col-sm-4">
            <!--Column right with nested rows and columns-->
            <div class="row">
                <div class="col-12"></div>
            </div>
            <div class="row">
                <div class="col-6"></div>
                <div class="col-6"></div>
            </div>
        </div>
    </div>
</div>

尝试一下

网格列的对齐方式

可以使用 flexbox 将容器内垂直和水平方向的列进行对齐。尝试以下示例以了解其工作原理：

网格列的垂直对齐

可以使用类.align-items-start、.align-items-center和.align-items-end分别在容器的顶部、中间和底部垂直对齐网格列。

<div class="container">
    <div class="row align-items-start">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

尝试一下

网格列的水平对齐

可以使用类.justify-content-start、.justify-content-center和.justify-content-end分别在容器的左侧、中间和右侧水平对齐网格列。让我们看看下面的例子，看看它是如何工作的：

<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
</div>

尝试一下

偏移网格列

还可以使用列偏移类（如.offset-sm-*、.offset-md-*、.offset-lg-*等）将网格列向右移动以进行对齐。

这些类通过简单地将其左边距增加指定的列数来抵消列。例如，**.col-md-8** 列上的类 .offset-md-4 将其从原始位置向右移动四列。试试下面的例子看看它是如何工作的：

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
    </div>
    <div class="row">        
        <div class="col-sm-8 offset-sm-4"><!--Column with 4 columns offset--></div>
    </div>
</div>

尝试一下

将列换行

我们还可以通过在<div> 上添加类 .w-100 来创建跨多行的等宽列，我们希望列转换为行。此外，可以通过将**.w-100**类与响应式显示实用程序类相结合来使这些中断具有响应性。

<div class="container">
    <!-- Break columns on all devices -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!-- Break columns on all devices except extra large devices -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100 d-xl-none"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>

尝试一下

我们已经了解新 Bootstrap 4 网格系统的基础知识。在接下来的几章中，我们将学习如何使用这个 flexbox 网格系统创建基本的网页布局。