Bootstrap5 Grid 网格

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

我们也可以根据自己的需要,定义列数:

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

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

请确保每一行中列的总和等于或小于 12。


网格类

Bootstrap 5 网格系统有以下 6 个类:

  • .col- 针对所有设备。
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px。
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
  • .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

网格系统规则

Bootstrap5 网格系统规则:

  • 我们的网格支持六个响应断点。 断点基于最小宽度媒体查询,这意味着它们会影响该断点及其上的所有断点(例如,col-sm-4适用于sm、md、lg、xl和xxl)。这意味着您可以通过每个断点控制容器和列的大小以及行为。
  • 容器居中并水平放置内容。 使用.container表示响应像素宽度,.container-fluid表示宽度:100%覆盖所有视口和设备,或使用响应容器(例如..container-md))表示流体和像素宽度的组合。
  • 行是列的包装器。 每列都有水平填充(称为间隙),用于控制它们之间的间距。然后在具有负边距的行上抵消此填充,以确保列中的内容在视觉上与左侧对齐。行还支持修改器类来统一应用列大小调整,并支持边距类来更改内容的间距。
  • 列非常灵活。 每行有12个模板列可用,允许您创建跨任意列数的不同元素组合。列类表示要跨越的模板列的数量(例如,col-4 跨越四个列)。宽度是按百分比设置的,因此相对大小总是相同的。
  • 间隙也响应和定制。 所有断点上都可以使用Gutter类,其大小与边距和填充间距相同。将水平间隙更改为.gx-*类,将垂直间隙更改为.gy-*类,或将所有间隙更改为.g-*类。g-0也可用于移除间隙。
  • Sass 变量、Maps和Mixins为网格提供动力。如果你不想在 Bootstrap 中使用预定义的网格类,你可以使用我们网格的源 Sass 来创建你自己的带有更多语义标记的类。我们还包括一些 CSS 自定义属性来使用这些 Sass 变量,为您提供更大的灵活性。
  • Bootstrap 5 和 Bootstrap 4 使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。 如果您想了解有关 Flexbox 的更多信息,可以阅读我们的 CSS Flexbox 教程 。

下表总结了 Bootstrap 网格系统如何在不同设备上工作的:

超小设备
<576px
平板
≥576px
桌面显示器
≥768px
大桌面显示器
≥992px
特大桌面显示器
≥1200px
超大桌面显示器
≥1400px
容器最大宽度 None (auto) 540px 720px 960px 1140px 1320px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列数量和 12
间隙宽度 1.5rem (一个列的每边分别 .75rem)
可嵌套 Yes
列排序 Yes

我们将上述的类组合使用,从而创建更灵活的页面布局。

提示:每个类都是按比例放大的,所以如果你想设置 sm 和 md 具有相同的宽度,你只需要指定 sm 即可。


Bootstrap 5 网格的基本结构

以下代码为 Bootstrap 5 网格的基本结构:

Bootstrap5 网格基本结构

<!-- 第一个例子:控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
 
<!-- 第二个例子:或让 Bootstrap 者自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

第一个例子:创建一行(<div class="row">)。然后, 添加需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字,让 bootstrap 自动处理布局,同一行的每个列宽度相等: 两个 "col" ,每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度,四个 "col"每个就为 25% 的宽度,以此类推。同样,你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

接下来我们可以看看实例。

自动布局列

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

创建相等宽度的列

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

设置某一列宽度

如果只设置一列的宽度,其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%:

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

设置可变宽度

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

<div class="container-fluid mt-3">
    <h2>设置可变宽度</h2>
    <p>使用col-{breakpoint}-auto类根据列内容的自然宽度调整列的大小 :</p>
    <div class="row justify-content-md-center">
      <div class="col col-lg-2 bg-success">
        1 of 3
      </div>
      <div class="col-md-auto bg-warning">
        可变宽 - col-md-auto
      </div>
      <div class="col col-lg-2 bg-primary">
        3 of 3
      </div>
    </div>
    <div class="row">
      <div class="col bg-secondary">
        1 of 3
      </div>
      <div class="col-md-auto bg-danger">
        可变宽 - col-md-auto
      </div>
      <div class="col col-lg-2 bg-info">
        3 of 3
      </div>
    </div>
  </div>

响应类

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

所有断点

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

<div class="container-fluid mt-3">
    <h2>设置相同网格和特定大小网格</h2>
    <div class="row">
      <div class="col bg-success" >col</div>
      <div class="col bg-warning">col</div>
      <div class="col bg-primary">col</div>
      <div class="col bg-secondary">col</div>
    </div>
    <div class="row">
      <div class="col-8 bg-danger">col-8</div>
      <div class="col-4 bg-info">col-4</div>
    </div>
  </div>

等宽响应式列

以下实例演示了如何在平板及更大屏幕上创建等宽度的响应式列。 在移动设备上,即屏幕宽度小于 576px 时,四个列将会上下堆叠排版:

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

不等宽响应式列

以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上,即屏幕宽度小于 576px 时,两个列将会上下堆叠排版:

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

混合和匹配

不希望列简单地堆叠在一些网格层中吗?根据需要为每一层使用不同类的组合。请参阅下面的示例,以更好地了解其工作原理

<div class="container-fluid mt-3">
    <h2>Grid混合和匹配</h2>
    <!-- 通过使一个全宽和另一个半宽来堆叠移动设备上的列 -->
    <div class="row">
      <div class="col-md-8 bg-success">.col-md-8</div>
      <div class="col-6 col-md-4 bg-warning">.col-6 .col-md-4</div>
    </div>

    <!-- 列在移动设备上的宽度为 50%,在桌面设备上增加到 33.3% 的宽度 -->
    <div class="row">
      <div class="col-6 col-md-4 bg-primary">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4 bg-secondary">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4 bg-danger">.col-6 .col-md-4</div>
    </div>

    <!-- 在移动设备和桌面设备上,列始终为 50% 宽 -->
    <div class="row">
      <div class="col-6 bg-info">.col-6</div>
      <div class="col-6 bg-success">.col-6</div>
    </div>
  </div>

每行2列

<div class="container-fluid mt-3">
    <h2>Grid 行和列 每行2列</h2>
    <div class="row row-cols-2">
      <div class="col bg-success">Column</div>
      <div class="col bg-warning">Column</div>
      <div class="col bg-info">Column</div>
      <div class="col bg-secondary">Column</div>
    </div>
  </div>

每行3列

<div class="container-fluid mt-3">
    <h2>Grid 行和列 每行3列</h2>
    <div class="row row-cols-3">
      <div class="col bg-success">Column</div>
      <div class="col bg-warning">Column</div>
      <div class="col bg-info">Column</div>
      <div class="col bg-secondary">Column</div>
    </div>
  </div>

每行4列

<div class="container-fluid mt-3">
    <h2>Grid 行和列 每行4列</h2>
    <div class="row row-cols-4">
      <div class="col bg-success">Column</div>
      <div class="col bg-warning">Column</div>
      <div class="col bg-info">Column</div>
      <div class="col bg-secondary">Column</div>
    </div>
  </div>

每行可变宽

<div class="container-fluid mt-3">
    <h2>Grid 行和列 每行可变宽</h2>
    <div class="row row-cols-auto">
      <div class="col bg-success">Column</div>
      <div class="col bg-warning">Column</div>
      <div class="col bg-info">Column</div>
      <div class="col bg-secondary">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);
  }
}

平板和桌面端

以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%,如果在平板端则左边的宽度为 25%,右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>RUNOOPS</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>自学教程</p>
    </div>
  </div>
</div>

平板、桌面、大桌面显示器、超大桌面显示器

以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为:25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。

<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
</div>

嵌套列

要使用默认网格嵌套内容,请在现有的.col sm-*列中添加一个新的.row和一组.col sm-*列。嵌套行应包含一组最多12个或更少的列(不要求使用所有12个可用列)。

<div class="container-fluid mt-3">
    <h2>Grid row 嵌套</h2>
    <div class="row">
      <div class="col-sm-3 bg-success">
        Level 1: .col-sm-3
      </div>
      <div class="col-sm-9 bg-warning">
        <div class="row m-3">
          <div class="col-8 col-sm-6 bg-info">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6 bg-secondary">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>

以下实例创建两列布局,其中一列内嵌套着另外两列:

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

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移,请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11

例如:.offset-md-4 是把.col-md-4 往右移了四列格。

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

Sass

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

变量

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

$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

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

例子

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

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

列和间隙

可以通过Sass变量修改网格列的数量$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变量或映射进行任何更改时,需要保存更改并重新编译。这样做将输出一组全新的预定义网格类,用于列宽、偏移和排序。响应可见性实用程序也将更新为使用自定义断点。确保以px(而不是rem、em或%)设置网格值。