Bootstrap 网格系统

Bootstrap 网格系统

Bootstrap 的网格系统可以将页面最多划分为 12 列。

如果不想将 12 列都单独使用，可以将这些列组合在一起以形成更宽的列:

Bootstrap 的网格系统是响应式的，列将根据屏幕大小自动重新排列。

在大屏幕上，将内容组织成三列可能会更好，但在小屏幕上，如果内容项堆叠在一起会更好。

Grid Classes

Bootstrap 网格系统有四种样式类:

• xs (适用于手机 - 屏幕宽度小于 768 px)
• sm (适用于平板电脑 - 屏幕宽度等于或大于 768 px)
• md (适用于小型笔记本电脑 - 屏幕宽度等于或大于 992 px)
• lg (适用于笔记本电脑和台式电脑 - 屏幕宽度等于或大于 1200 px)

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

提示：每种样式类都会向上兼容，因此如果希望为 xs 和 sm 置相同的宽度，只需指定 xs 即可。

网格系统规则

一些 Bootstrap 网格系统规则:

• 行必须放在 .container（fixed-width）或 .container-fluid（full-width）内，这样才能正确对齐和填充
• 使用行创建水平列组
• 内容应该放在列中，只有列可以是行的直接子元素
• .row 和 .col-sm-4 等预定义类可用于快速生成网格布局
• 列通过 padding 填充创建 Gutter（列的内容之间的间隙）。这个 padding 通过 .row 上的负边距在第一列和最后一列的行中偏移
• 通过指定 12 个可用列的数量来创建网格列。例如，3 个相等的列将使用 3 个 .col-sm-4
• 列宽以百分比为单位，因此它们始终是动态的，并且相对于其父元素自动调整其大小

Bootstrap 网格的基础结构

下面是 Bootstrap 网格的基础结构:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

因此，要创建所需的布局，请先创建一个容器（<div class="container">）。接下来，创建一个行（<div class="row">）。然后，添加所需的列数（带有适当 .col-- 样式类的标记）。请注意 .col-- 列中的数字每行加起来应该是 12。

Grid 可选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作:

实例

下一章将展示不同设备的网格系统实例:

• 堆叠与水平
• 小屏幕设备
• 中等屏幕设备
• 大屏幕设备
• 更多网格实例