Bootstrap 网格系统

Bootstrap网格系统

Bootstrap 的网格系统允许页面上最多有 12 列。

如果您不想单独使用所有 12 列，可以将这些列分组在一起以创建更宽的列：

Bootstrap 的网格系统是响应式的，并且列会根据屏幕大小重新排列：在大屏幕上，将内容组织成三列可能看起来更好，但在小屏幕上，如果内容项堆叠起来会更好在彼此之上。

网格类

Bootstrap网格系统有四个类：

• xs（对于手机 - 屏幕宽度小于 768 像素）
• sm（对于平板电脑 - 屏幕宽度等于或大于 768 像素）
• md（对于小型笔记本电脑 - 屏幕宽度等于或大于 992 像素）
• lg（对于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200 像素）

可以组合上面的类来创建更加动态和灵活的布局。

提示：每个类都会按比例放大，因此如果您希望为 xs 和 sm 设置相同的宽度，则只需指定 xs 即可。

网格系统规则

一些 Bootstrap 网格系统规则：

• 行必须放置在.container（固定宽度）或.container-fluid（全角）用于正确对齐和填充
• 使用行创建水平列组
• 内容应放置在列中，并且只有列可以是行的直接子级
• 预定义类如.row 和.col-sm-4可用于快速制作网格布局
• 列通过填充创建装订线（列内容之间的间隙）。该填充通过负边距在第一列和最后一列的行中偏移.rows
• 网格列是通过指定您希望跨越的 12 个可用列的数量来创建的。例如，三个相等的列将使用三个.col-sm-4
• 列宽以百分比表示，因此它们始终相对于其父元素是可变的和大小的

Bootstrap 网格的基本结构

以下是 Bootstrap 网格的基本结构：

因此，要创建所需的布局，请创建一个容器（<div class="container">）。接下来，创建一行 (<div class="row">）。然后，添加所需的列数（带有适当的标签.col-*-*类）。请注意，其中的数字.col-*-*每行的总和应始终为 12。

网格选项

下表总结了 Bootstrap 网格系统如何在多个设备上工作：

示例

接下来的章节展示了适用于不同设备的网格系统的示例：

• 水平堆叠
• 小型设备
• 中型设备
• 大型设备
• 更多网格示例