首页 HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP5 v4.6 PHP7 SQL 参考手册 示例 FAQ 在线 HTML 编辑器
BOOTSTRAP 基础教程
Bootstrap 简介 Bootstrap 入门 Bootstrap 容器 Bootstrap 网格系统 Bootstrap 固定布局 Bootstrap 流体布局 Bootstrap 响应式布局 Bootstrap 排版 Bootstrap 表格 Bootstrap 列表 Bootstrap 列表组 Bootstrap 表单 Bootstrap 自定义表单 Bootstrap 输入组 Bootstrap 按钮 Bootstrap 按钮组 Bootstrap 图片 Bootstrap 卡片 Bootstrap 媒体对象 Bootstrap 图标 Bootstrap 导航 Bootstrap 导航栏 Bootstrap 面包屑 Bootstrap 分页 Bootstrap 徽章 Bootstrap 进度条 Bootstrap Spinners Bootstrap Jumbotron Bootstrap 助手类
BOOTSTRAP 高级教程
Bootstrap 模态 Bootstrap 下拉菜单 Bootstrap 选项卡 Bootstrap 工具提示 Bootstrap 弹出框 Bootstrap 警报 Bootstrap 有状态按钮 Bootstrap 手风琴 Bootstrap 轮播 Bootstrap Typeahead Bootstrap ScrollSpy Bootstrap Toasts
BOOTSTRAP 示例
Bootstrap 实践示例 Bootstrap 常见问题解答
BOOTSTRAP 存档
Bootstrap 3 教程 Bootstrap 3 实践示例

Bootstrap 网格系统

Bootstrap 网格系统是创建响应式网页布局的最快、最简单的方法。

什么是 Bootstrap 网格系统

Bootstrap 网格系统提供了快速便捷的方式来创建响应式网站布局。 最新的 Bootstrap 4 版本引入了新的移动优先 flexbox 网格系统，该网格系统可以适当地扩展到 12 列作为设备或 视口大小增加。

Bootstrap 4 包含预定义的网格类，用于为不同类型的设备（如手机、平板电脑、笔记本电脑和台式机等）快速制作网格布局。例如，您可以使用 .col-* 类来创建网格 纵向模式下超小型设备手机的列，类似地，您可以使用 .col-sm-* 类为横向模式下的手机等小屏幕设备创建网格列，中型模式的 .col-md-* 类 像平板电脑这样的屏幕设备，用于台式机等大型设备的 .col-lg-* 类，以及用于超大桌面屏幕的 .col-xl-* 类。

下表总结了新网格系统的一些关键特性。

Features
Bootstrap 4 Grid System
 Extra small
<576px
 Small
≥576px
 Medium
≥768px
 Large
≥992px
 Extra large
≥1200px
 
Max container width
 None (auto) 540px 720px 960px 1140px 
Ideal for
 Mobile (Portrait) Mobile (Landscape) Tablets Laptops Laptops & Desktops
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Number of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

上表展示了一件重要的事情，将任何 .col-sm-* 类应用于元素不仅会影响其在小型设备上的样式，还会影响屏幕宽度更大的中型、大型和超大型设备 如果 .col-md-*, .col-lg-* 或 .col-xl-* 类不存在，则大于或等于 768px。 同样，如果没有 .col-lg-* 或 .col-xl- 类，.col-md-* 类不仅会影响中型设备上元素的样式，还会影响大型和超大型设备。

现在的问题是如何使用这个 12 列响应式网格系统创建行和列。 答案很简单，首先创建一个容器，使用任何容器类（例如 .container）作为行和列的包装器，然后使用 .row 类在容器内创建行，然后 在任何行内创建列，您可以使用 .col-*、.col-sm-*、.col-md-*、.col-lg-* 和 .col-xl-* 类。 这些列是我们将放置内容的实际内容区域。 让我们将所有这些事情付诸行动，看看它是如何工作的：

创建两列布局

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

示例

Try this code »
<div class="container">
    <!--具有两个相等列的行-->
    <div class="row">
        <div class="col-md-6">Column left</div>
        <div class="col-md-6">Column right</div>
    </div>
    
    <!--两列按 1:2 比例划分的行-->
    <div class="row">
        <div class="col-md-4">Column left</div>
        <div class="col-md-8">Column right</div>
    </div>
    
    <!--两列按 1:3 比例划分的行-->
    <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），它也适用于横向模式的平板电脑。 但是，在纵向模式下，网格列将像往常一样是水平的。

示例

Try this code »
<div class="container">
    <!--具有三个相等列的行-->
    <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>
    
    <!--三列按 1:4:1 比例划分的行-->
    <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>
    
    <!--三列不均匀划分的行-->
    <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 自动布局列

您还可以通过简单地使用类 .col 为所有设备（超小、小、中、大和超大）创建 等宽列，而无需指定任何列 数字。

让我们试试下面的例子来了解它是如何工作的：

示例

Try this code »
<div class="container">
    <!--具有两个相等列的行-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
    </div>
    
    <!--具有三个相等列的行-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

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

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

示例

Try this code »
<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>

列换行行为

现在我们将创建更灵活的布局，根据视口大小更改列方向。 以下示例将在笔记本电脑和台式机等大型设备以及平板电脑（例如 Apple iPad）上以横向模式创建三列布局，但在平板电脑等中型设备上以纵向模式（768px ≤ 屏幕宽度 < 992px） ，它将变为两列布局，其中第三列移动到前两列的底部。

示例

Try this code »
<div class="container">
    <div class="row">
        <div class="col-md-4 col-lg-3">Column one</div>
        <div class="col-md-8 col-lg-6">Column two</div>
        <div class="col-md-12 col-lg-3">Column three</div>
    </div>
</div>

正如您在上面的示例中所见，中等网格列数（即 col-md-*）的总和为 3 + 9 + 12 = 24 > 12，因此具有 .col-md-12 类的第三个 <div> 元素添加了超出的额外列 .row 中最多 12 列，在中型屏幕尺寸设备上作为一个连续单元换行。

同样，您可以使用 Bootstrap 的网格列环绕功能为您的网站创建更具适应性的布局。 这里有一些准备使用的Bootstrap 网格示例。

使用 Bootstrap 创建多列布局

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

Bootstrap Grid System Illustration

在上图中，所有设备中共有 12 个内容框，但其位置根据设备屏幕大小而有所不同，例如在移动设备中，布局呈现为一列网格布局，其上方放置 1 列和 12 行彼此，而在平板电脑中，它呈现为两列网格布局，具有 2 列和 6 行。

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

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

示例

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

如果您在屏幕或视口宽度大于或等于 992 像素但小于 1200 像素的笔记本电脑或台式机中看到上述示例的输出，您会发现布局有 4 行，其中每行有 3 列相等 采用 3x4 网格布局。

现在是时候为其他设备定制我们的布局了。 让我们首先为平板设备定制它。 由于在平板电脑内部，我们的布局呈现为 2x6 网格（即 2 列和 6 行）。 因此，继续在每一列上添加类 .col-md-6。

示例

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

提示： 为方便起见，选择您的主要目标设备并首先为该设备创建布局，然后添加类以使其对其他设备做出响应。

同样，您可以通过在每一列上添加类 .col-xl-3 来自定义超大设备（例如大桌面屏幕）的布局，因为我们的超大设备布局中的每一行都包含 4列。 这是整个过程合并后的最终代码。

示例

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

提示：根据上图，手机不需要自定义布局； 因为在没有 .col-* 或 .col-sm-* 类的情况下，超小型设备上的列将自动变为水平并呈现为 1x12 列网格布局。

网格列的嵌套

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

示例

Try this code »
<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>

创建可变宽度列

您可以使用 col-{breakpoint}-auto 类根据其内容的自然宽度来调整列的大小。 试试下面的例子，看看它是如何工作的：

示例

Try this code »
<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3">Column left</div>
        <div class="col-md-auto">Variable width column</div>
        <div class="col-md-3">Column right</div>
    </div>
    <div class="row">
        <div class="col">Column left</div>
        <div class="col-auto">Variable width column</div>
        <div class="col">Column right</div>
    </div>
</div>

网格列的对齐方式

您可以使用 flexbox 对齐实用程序来垂直和水平对齐容器内的网格列。 尝试以下示例以了解其工作原理：

网格列的垂直对齐

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

示例

Try this code »
<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>

一行中的各个列也可以垂直对齐。 这是一个例子：

示例

Try this code »
<div class="container">
    <div class="row">
        <div class="col align-self-start">Column one</div>
        <div class="col align-self-center">Column two</div>
        <div class="col align-self-end">Column three</div>
    </div>
</div>

注意：您可以跳过 .col-* 网格类中的数字，只需使用 .col 类为所有设备创建大小相等的列 （特小、小、中、大和特大）。

网格列的水平对齐

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

示例

Try this code »
<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>

或者，您可以使用类 .justify-content-around 以在两端均匀分布网格列，而您可以使用类 .justify-content-between 将网格列均匀分布在第一列放在开头和最后一列放在末尾的位置。 试试下面的例子，看看它是如何工作的：

示例

Try this code »
<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
</div>

请查看 css3 弹性盒 上的教程，了解有关弹性项目对齐的更多信息。

重新排序网格列

您甚至可以更改网格列的视觉顺序，而无需更改它们在实际标记中的顺序。 使用类 .order-last 将列排在最后，而使用类 .order-first 将列排在第一位。 我们来看一个例子：

示例

Try this code »
<div class="container">
    <div class="row">
        <div class="col order-last">First, but ordered at last</div>
        <div class="col">Second, but unordered</div>
        <div class="col order-first">Last, but ordered at first</div>
    </div>
</div>

您还可以使用 .order-* 类根据排序号对网格列进行排序。 具有较高阶数的网格列位于具有较低阶数的网格列或没有阶数的网格列之后。 它包括对所有五个网格层的 1 到 12 的支持。

示例

Try this code »
<div class="container">
    <div class="row">
        <div class="col order-4">First, but ordered at last</div>
        <div class="col">Second, but ordered at first</div>
        <div class="col order-1">Last, but ordered at second</div>
    </div>
</div>

偏移网格列

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

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

示例

Try this code »
<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"><!--具有 4 列偏移的列--></div>
    </div>
</div>

您还可以使用边距实用程序类来偏移列。 这些类在偏移宽度不固定的情况下很有用。 这是一个例子：

示例

Try this code »
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 ml-auto"><!--将此列向右偏移--></div>
    </div>
    <div class="row">
        <div class="col-auto mr-auto"></div>
        <div class="col-auto"><!--将此列从上一列移开--></div>
    </div>
</div>

注意：您可以使用类 .col-auto 创建只占用所需空间的列，即根据内容本身的列大小。

创建紧凑的列

您可以通过在 .row 上添加类 .no-gutters 来删除列之间的默认装订线以创建紧凑的布局。 此类删除行的负边距和所有直接子列的水平填充。 这是一个例子：

示例

Try this code »
<div class="row no-gutters">
    <div class="col-4">Column one</div>
    <div class="col-4">Column two</div>
    <div class="col-4">Column three</div>
</div>

将列换行

您还可以通过插入带有 .w-100 类的 <div> 来创建跨多行的等宽列，您希望列在其中换行。 此外，您可以通过将 .w-100 类与 响应式显示实用程序类 组合来使这些中断响应。

示例

Try this code »
<div class="container">
    <!-- 在所有设备上断开列 -->
    <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>
    <!-- 除超大型设备外的所有设备上的分栏 -->
    <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 网格系统创建基本的网页布局。

上一页 下一页
Advertisements

这个网站对你有帮助吗？ 请给我们一个赞，或分享您的反馈，以帮助我们改进。 在微博和CSDN上与我们联系以获取最新更新。

关于我们

关于我们 使用条款 隐私政策

联系方式

联系我们 报告错误

互动工具

Copyright © 2021-2024 qyoo.cn All Rights Reserved. | 京ICP备14045893号-13