网格系统

使用Bootstrap强大的flexbox网格来构建各种形状和尺寸的布局，基于我们的12列、6个默认的响应层、Sass变量和混搭，以及数十种预定义的类。

示例

Bootstrap的网格系统使用一系列的容器、行和列来布局和对齐内容。它是用flexbox构建的，是完全响应式的。下面是一个例子，来深入解释了网格系统是如何实现的。

新手或不熟悉 flexbox？阅读这篇CSS Tricks flexbox指南，了解背景、术语、指南和代码片段。

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

在线运行

上面的示例使用我们预定义的网格类在所有设备和视图窗口中创建了三个等宽的列。这些列包裹在父类.container中。

网格选项

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

特小（xs）
小（sm）
中（md）
大（lg）
特大（xl）
超大（xxl）

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

name	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
容器的`max-width`	None (auto)	540px	720px	960px	1140px	1320px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
`# of columns`	12
槽（Gutter）宽	1.5rem (每列左和右.75rem)
自定义槽	Yes
可嵌套	Yes
列排序	Yes

自动布局的列

根据屏幕窗口的大小，自动布局（无需使用类似.col-sm-6指定宽度）。

等宽

例如，下面的例子中两种网格布局方式，适用于任何设备和屏幕（从xs到xxl）。根据需要的断点添加任意数量的无单元类（col），每一列的宽度都是一样的。

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

在线运行

指定其中一列设置宽度

flexbox网格列的自动布局也意味着你可以设置一列的宽度，并使其周围的兄弟列自动调整大小。你可以使用预定义的网格类（如下所示），网格混搭，或者内联宽度。请注意，无论中心列的宽度如何，其他列都会自动调整大小。

<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类可以根据其内容的自然宽度来调整列的大小。

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

在线运行

响应式类

Bootstrap的网格包括六层预定义类，用于构建复杂的响应式布局。在超小型、小型、中型、大型或超大型设备上自定义你的列的大小，无论你怎么看都合适。

所有断点

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

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

在线运行

叠加到水平（Stacked to horizontal）

使用一组.col-sm-*类，创建一个基本的网格系统，开始时是堆叠的，当在小的屏幕断言（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>

在线运行

混合搭配

不想让你的列简单地堆叠在一些网格层中？根据需要为每个层级使用不同的类组合。请看下面的例子，以便更好地了解这一切是如何工作的。

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>

在线运行

行列

使用响应的.row-cols-*类来快速设置列数，以最好地呈现你的内容和布局。普通的.col-*类适用于单独的列（例如.col-md-4），而行列类是作为快捷方式在父.row上设置的。使用.row-cols-auto，你可以给列以自然宽度。

使用这些行列类来快速创建基本的网格布局或控制你的布局。

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

在线运行

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

在线运行

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

在线运行

你也可以使用附带的Sass mixin, row-col()。

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

嵌套

要用默认网格来嵌套你的内容，可以在现有的.col-sm-*列中添加一个新的.row和一组.col-sm-*列。嵌套的行应该包括一组加起来为12列或更少的列（不要求你使用所有12列）。

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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变量和mixins来创建自定义的、语义的和响应式的页面布局。我们预定义的网格类使用这些相同的变量和混搭，为快速响应式布局提供了一整套现成的类。

变量

变量和map决定了列的数量、沟槽宽度和开始浮动列的media查询点。我们使用这些变量和map来生成上面记录的预定义网格类，以及下面列出的自定义混搭。

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

混合

Mixins与网格变量一起使用，为各个网格列生成语义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);

使用实例

你可以将变量修改为你自己的自定义值，或者直接使用mixins的默认值。下面是一个使用默认设置来创建两栏布局的例子，中间有空隙。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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变量和地图，可以完全定制预定义的网格类。改变层数、媒体查询尺寸和容器宽度，然后重新编译。

Columns 和 gutters

网格列的数量可以通过Sass变量来修改，$grid-columns用于生成每个单独列的宽度（百分比），而$grid-gutter-width则设置了列槽的宽度。$grid-columns用于生成每个单独列的宽度（百分比），而$grid-gutter-width则设置列槽的宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

网格层

除了列本身，你还可以自定义网格层数。如果你只想要四层网格，你可以更新$grid-breakpoints和$container-max-widths，就像这样。

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

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

当对Sass变量或map进行任何更改时，你需要保存你的更改并重新编译。然后输出一组全新的预定义网格类，用于列宽、偏移量和排序。响应式可见性实用程序也将被更新以使用自定义断点。确保以px为单位设置网格值（不是 rem、em或%）。

Bootstrap5 网格（Grid）

网格系统

示例

网格选项

自动布局的列

等宽

指定其中一列设置宽度

宽度可变的内容

响应式类

所有断点

叠加到水平（Stacked to horizontal）

混合搭配

行列

嵌套

Sass

变量

混合

使用实例

自定义网格

Columns 和 gutters

网格层

昵称