l-1

WEB教程

主页/Bootstrap V5.3 中文手册/布局方式 Layout/Grid system 网格系统

Bootstrap V5.3 中文手册

Grid system 网格系统

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

例

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

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

列
列
列
[HTML全文] 
<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-4smmdlgxlxxl

  • 容器居中并水平填充您的内容。用于跨所有视口和设备的响应式像素宽度，或用于流体宽度和像素宽度组合的响应式容器（例如，）。.container.container-fluidwidth: 100%.container-md

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

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

  • 装订线也是响应式和可定制的。 装订线类适用于所有断点，其大小与边距和填充间距相同。更改带有类的水平装订线、使用 的垂直装订线或所有带类的装订线。 也可用于去除排水沟。.gx-*.gy-*.g-*.g-0

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

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

网格选项

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

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

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

xs
<576像素		短信
≥576像素		MD
≥768像素		LG
≥992像素		XL
≥1200像素		xxl
≥1400像素
容器max-width无（自动）540像素720像素960像素1140像素1320像素
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
# 列数12
装订线宽度1.5rem（左右 .75rem）
定制装订线是的
嵌套是的
列排序是的

自动布局列

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

等宽

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

第 1 个，共 2 个
第 2 页，共 2 页
第 1 个，共 3 个
第 2 页，共 3 页
3 的 3
[HTML全文] 
<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>

设置一列宽度

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

第 1 个，共 3 个
2 / 3（更宽）
3 的 3
第 1 个，共 3 个
2 / 3（更宽）
3 的 3
[HTML全文] 
<div class="container text-center">
  <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
[HTML全文] 
<div class="container text-center">
  <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

山坳
山坳
山坳
山坳
col-8
col-4
[HTML全文] 
<div class="container text-center">
  <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
col-sm
col-sm
[HTML全文] 
<div class="container text-center">
  <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-md-8 域名
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 域名
.col-6 域名
[HTML全文] 
<div class="container text-center">
  <!-- 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

使用这些行列类可以快速创建基本网格布局或控制卡片布局。

列
列
列
列
[HTML全文] 
<div class="container text-center">
  <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>
列
列
列
列
[HTML全文] 
<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
列
列
列
列
[HTML全文] 
<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
列
列
列
列
[HTML全文] 
<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
列
列
列
列
[HTML全文] 
<div class="container text-center">
  <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>
列
列
列
列
[HTML全文] 
<div class="container text-center">
  <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-cols()

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

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

嵌 套

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

1 级：.col-sm-3
2 级：.col-8 .col-sm-6
2 级：.col-4 .col-sm-6
[HTML全文] 
<div class="container text-center">
  <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>

CSS系统

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

Sass 变量

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;
scss/_variables.scss 
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
scss/_variables.scss 
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass 混合

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

用法示例

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

.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);
  }
}
事由
次要内容
[HTML全文] 
<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-row-columns.row-cols-*

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

网格层

除了列本身之外，您还可以自定义网格层的数量。如果只想要四个网格层，则可以将 and 更新为如下所示：$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 变量或映射进行任何更改时，您需要保存更改并重新编译。这样做将输出一组全新的预定义网格类，用于列宽、偏移量和排序。响应式可见性实用程序也将更新为使用自定义断点。确保在 （not 、 、 或 ） 中设置网格值。pxremem%

声明：该Bootstrap v5.3 内容来自Bootstrap v5.3官方网站；中文翻译是使用Microsoft Edge浏览器免费翻译而来，且部分存在结合了Deepseek及人工翻译。