网格系统

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

这个怎么运作

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

刚接触或不熟悉 flexbox？ 阅读此 CSS 技巧 flexbox 指南，了解背景、术语、指南和代码片段。

三列之一

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上面的示例使用我们预定义的网格类在小型、中型、大型和超大型设备上创建了三个等宽列。这些列在父页面的中心.container。

分解它，这是它的工作原理：

容器提供了一种居中和水平填充站点内容的方法。用于.container响应式像素宽度或.container-fluid用于width: 100%所有视口和设备尺寸。
行是列的包装器。每列都有水平padding的（称为排水沟），用于控制它们之间的空间。padding然后在具有负边距的行上抵消这一点。这样，列中的所有内容在视觉上都在左侧对齐。
在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。
感谢 flexbox，没有指定的网格列width将自动布局为等宽列。例如，四个实例.col-sm将自动从小断点开始宽 25% 及以上。有关更多示例，请参阅自动布局列部分。
列类表示每行可能有 12 个列中您希望使用的列数。所以，如果你想要三个等宽的列，你可以使用.col-4.
Columnwidth是按百分比设置的，所以它们总是相对于它们的父元素是流动的和大小的。
列具有水平padding以在各个列之间创建装订线，但是，您可以margin从行和padding列.no-gutters中删除.row.
为了使网格响应，有五个网格断点，每个响应断点一个：所有断点（特小）、小、中、大和特大。
网格断点基于最小宽度媒体查询，这意味着它们适用于该断点及其上方的所有断点（例如，.col-sm-4适用于小型、中型、大型和超大型设备，但不适用于第一个xs断点）。
您可以使用预定义的网格类（如.col-4）或Sass mixins来进行更多语义标记。

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

网格选项

Bootstrap 使用ems 或rems 来定义大多数大小，而pxs 用于网格断点和容器宽度。这是因为视口宽度以像素为单位，不随字体大小而变化。

通过方便的表格了解 Bootstrap 网格系统的各个方面如何跨多个设备工作。

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px
最大容器宽度	无（自动）	540像素	720像素	960像素	1140像素
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# 列数	12
天沟宽度	30 像素（每列各 15 像素）
可嵌套	是的
列排序	是的

自动布局列

利用特定于断点的列类来轻松调整列大小，而无需像.col-sm-6.

等宽

例如，这里有两个网格布局适用于每个设备和视口，从xs到xl. 为您需要的每个断点添加任意数量的无单位类，并且每列的宽度都相同。

1 的 2

2 个，共 2 个

1 个，共 3 个

2 个，共 3 个

3 之 3

<div class="container">
  <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>

等宽的列可以分成多行，但是有一个Safari flexbox 错误，在没有明确的flex-basis或border. 旧版浏览器有一些变通方法，但如果您是最新版本，则不需要它们。

柱子

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

设置一列宽

flexbox 网格列的自动布局还意味着您可以设置一列的宽度并让同级列自动调整其大小。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都会调整大小。

1 个，共 3 个

3 个中的 2 个（更宽）

3 之 3

1 个，共 3 个

3 个中的 2 个（更宽）

3 之 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度内容

使用col-{breakpoint}-auto类根据其内容的自然宽度来调整列的大小。

1 个，共 3 个

可变宽度内容

3 之 3

1 个，共 3 个

可变宽度内容

3 之 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

等宽多行

.w-100通过在您希望列换行的位置插入一个新行来创建跨多行的等宽列。.w-100通过与一些响应式显示实用程序混合来使休息时间响应。

山口

<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>

响应类

Bootstrap 的网格包括五层预定义类，用于构建复杂的响应式布局。在您认为合适的超小型、小型、中型、大型或超大型设备上自定义列的大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用.col和.col-*类。当你需要一个特别大小的列时，指定一个编号的类；否则，请随意坚持.col。

山口

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

堆叠成水平

使用一组.col-sm-*类，您可以创建一个基本的网格系统，该系统从堆叠开始并在小断点 ( sm) 处变为水平。

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

连连看

不希望您的列简单地堆叠在某些网格层中？根据需要为每一层使用不同类的组合。请参阅下面的示例，以更好地了解它是如何工作的。

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

天沟

排水沟可以通过断点特定的填充和负边距实用程序类进行响应式调整。要更改给定行中的装订线，请将负边距实用程序与 s 上的.row匹配填充实用程序配对.col。.containeror.container-fluid父级也可能需要调整以避免不必要的溢出，再次使用匹配的填充实用程序。

lg这是在大 ( ) 断点及以上处自定义 Bootstrap 网格的示例。我们用增加了.col填充，用父.px-lg-5级抵消了它，然后用调整了包装器。.mx-lg-n5.row.container.px-lg-5

自定义列填充

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

结盟

使用 flexbox 对齐实用程序来垂直和水平对齐列。

垂直对齐

三列之一

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

三列之一

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐

两列之一

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

没有排水沟

我们预定义的网格类中的列之间的间距可以用.no-gutters. 这会从所有直接子列中删除负数margins.row和水平线。padding

这是创建这些样式的源代码。请注意，列覆盖的范围仅限于第一个子列，并通过属性选择器定位。虽然这会生成更具体的选择器，但仍可以使用间距实用程序进一步自定义列填充。

需要边缘到边缘的设计？删除父级.container或.container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

在实践中，它看起来是这样的。请注意，您可以继续将其与所有其他预定义的网格类（包括列宽、响应层、重新排序等）一起使用。

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列换行

如果单行中放置了超过 12 列，则每组额外的列将作为一个单元换行。

.col-9

.col-4
由于 9 + 4 = 13 > 12，这个 4 列宽的 div 作为一个连续单元被换行到一个新行上。

.col-6
后续列沿新行继续。

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

分栏符

在 flexbox 中将列换行需要一个小技巧：width: 100%在您想要将列换行的任何位置添加一个元素。通常这是通过多个.rows 来完成的，但并不是每个实现方法都可以解决这个问题。

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

您还可以使用我们的响应式显示实用程序在特定断点应用此中断。

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

重新排序

订单类

使用.order-类来控制内容的视觉顺序。这些类是响应式的，因此您可以设置order断点（例如，.order-1.order-md-2）。包括对所有五个网格层1的支持。12

首先，但无序

第二，但最后

第三，但首先

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

还有响应式.order-first和.order-last类分别通过应用和( )来改变order元素的属性。这些类也可以根据需要与编号的类混合。order: -1order: 13order: $columns + 1.order-*

首先，但最后

第二，但无序

第三，但首先

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

偏移列

您可以通过两种方式偏移网格列：我们的响应.offset-式网格类和我们的边距实用程序。网格类的大小与列匹配，而边距对于偏移宽度可变的快速布局更有用。

偏移类

使用类将列向右移动.offset-md-*。这些类逐列增加一列的左边距*。例如，.offset-md-4移动.col-md-4四列。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

除了在响应断点处清除列之外，您可能还需要重置偏移量。请参阅网格示例中的实际操作。

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

保证金效用

随着 v4 中向 flexbox 的迁移，您可以使用边距实用程序，例如.mr-auto强制兄弟列彼此远离。

.col-md-4

.col-md-4 .ml-自动

.col-md-3 .ml-md-自动

.col-auto .mr-自动

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

嵌套

要使用默认网格嵌套您的内容，请在现有列中添加一.row组新列。嵌套行应包括一组不超过 12 列的列（不需要使用所有 12 个可用列）。.col-sm-*.col-sm-*

级别 1：.col-sm-9

2 级：.col-8 .col-sm-6

级别 2：.col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass 混合

使用 Bootstrap 的 Sass 源文件时，您可以选择使用 Sass 变量和 mixin 来创建自定义、语义和响应式页面布局。我们预定义的网格类使用这些相同的变量和 mixin 来提供一整套现成的类，以实现快速响应的布局。

变量

变量和映射确定列数、装订线宽度和开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类，以及下面列出的自定义 mixins。

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

混合

Mixin 与网格变量结合使用，为各个网格列生成语义 CSS。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

示例用法

您可以将变量修改为您自己的自定义值，或者仅使用带有默认值的 mixin。这是一个使用默认设置创建两列布局的示例，其间有间隙。

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

主要内容

次要内容

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

自定义网格

使用我们内置的网格 Sass 变量和映射，可以完全自定义预定义的网格类。更改层数、媒体查询维度和容器宽度，然后重新编译。

列和排水沟

网格列的数量可以通过 Sass 变量进行修改。$grid-columns用于生成每个单独列的宽度（百分比），同时$grid-gutter-width设置列间距的宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

网格层

除了列本身之外，您还可以自定义网格层的数量。如果您只想要四个网格层，您可以将$grid-breakpointsand更新为$container-max-widths如下内容：

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

在对 Sass 变量或映射进行任何更改时，您需要保存更改并重新编译。这样做将输出一组全新的预定义网格类，用于列宽、偏移和排序。响应式可见性实用程序也将更新为使用自定义断点。确保在px(not rem, em, or %) 中设置网格值。