bootstrap前端框架的网格系统

使用我们强大的移动优先弹性框网格来构建各种形状和大小的布局，这要归功于十二列系统、六个默认响应层、Sass 变量和混合以及数十个预定义类。

示例

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它是用flexbox构建的，并且是完全响应的。下面是一个示例，并深入解释了网格系统是如何组合在一起的。

上图代码

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上面的示例使用预定义的网格类在所有设备和视口中创建三个等宽列。这些列在页面中居中，父级为.container。

工作原理

分解一下，网格系统是如何组合在一起的：

• 我们的网格支持六个响应断点。 断点基于 min-width媒体查询，这意味着它们会影响该断点及其上方的所有断点（例如，.col-sm-4适用于sm，md，lg，xl和xxl）。这意味着您可以通过每个断点控制容器和列的大小和行为。

• 容器居中并水平填充内容。 在所有视口和设备上使用.container表示响应式像素宽度，使用.container-fluid表示 width: 100%，或使用响应式容器（例如.container-md`）表示流体和像素宽度的组合。

• 行是列的包装器。 每列都有水平的 padding（称为槽），用于控制它们之间的间距。然后，在具有负边距的行上抵消此 padding，以确保列中的内容在视觉上与左侧对齐。行还支持修饰符类来 统一应用列大小和 槽类来更改内容的间距。

• 列非常灵活。 每行有 12 个模板列可用，允许您创建跨越任意列数的不同元素组合。列类指示要跨越的模板列数（例如，col-4跨越四个）。width以百分比设置，因此您始终具有相同的相对大小。

• 槽也是响应式和可自定义的。 [槽类可用(/docs/5.3/layout/gutters/) 跨越所有断点，其大小与我们的 边距和填充间距 相同。使用 .gx-*类更改水平槽，使用.gy-*更改垂直槽，或使用.g-*类更改所有槽。 .g-0也可用于移除槽（gutters）。

• Sass 变量、映射和混合为网格提供动力。 如果您不想在 Bootstrap 中使用预定义的网格类，您可以使用我们的 grid 的源代码 Sass 创建自己的具有更多语义标记的网格类。我们还包含一些 CSS 自定义属性来使用这些 Sass 变量，为您提供更大的灵活性。

请注意限制和围绕flexbox的错误，例如无法使用某些HTML元素作为flex容器。

网格选项

Bootstrap的网格系统可以适应所有六个默认断点，以及您自定义的任何断点。六个默认网格层如下所示：

• 超小 (xs)

• 小 (sm)

• 中等 (md)

• 大 (lg)

• 超大 (xl)

• 超大号(xxl)

如上所述，这些断点中的每一个都有自己的容器、唯一的类前缀和修饰符。以下是网格在这些断点之间的变化方式：

自动布局列

利用特定于断点的列类轻松调整列大小，而无需显式编号的类（如.col-sm-6）。

等宽

例如，下面是适用于每个设备和视口的两个网格布局，从xs到xxl。为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>