布局容器与网格系统

Posted on 9 月 28, 2026 by

布局容器

容器是 Bootstrap 中最基本的布局元素，使用默认网格系统时必须用到。提供两种类型：

固定宽度容器（响应式，每个断点处 max-width 会变化）：

<div class="container">
  <!-- Content here -->
</div>Code language: HTML, XML (xml)

流体宽度容器（始终 100% 宽，横跨整个视口）：

<div class="container-fluid">
  ...
</div>Code language: HTML, XML (xml)

容器可以嵌套，但大多数布局不需要这么做。

断点体系

Bootstrap 的网格系统基于五个响应层级，对应不同的屏幕尺寸：

断点缩写含义最小宽度CSS 媒体查询
xsExtra small（超小，手机竖屏）< 576px默认，无媒体查询
smSmall（手机横屏）>= 576px@media (min-width: 576px)
mdMedium（平板）>= 768px@media (min-width: 768px)
lgLarge（桌面）>= 992px@media (min-width: 992px)
xlExtra large（大桌面）>= 1200px@media (min-width: 1200px)

Sass 中的缩写写法：

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }Code language: CSS (css)

sm、md、lg、xl 这四个单词在 Bootstrap 的网格、间距、显示隐藏、对齐等各个地方都会反复出现。

网格系统工作原理

Bootstrap 网格系统使用容器（container）→ 行（row）→ 列（col）三层结构，基于 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>Code language: HTML, XML (xml)

上面这段代码在小屏及以上设备中创建三个等宽列，在父容器中居中。

自动布局列

等宽列

不指定具体数字，每个 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>Code language: HTML, XML (xml)

无论屏幕多宽，col 都会均分可用空间。

强制换行（w-100）

<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>Code language: HTML, XML (xml)

w-100 设置 width: 100%，强制后面的列换到新行。

设置单列宽度，兄弟列自动调整

<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>Code language: HTML, XML (xml)

中间列固定占 6 份，左右两列自动平分剩余空间。

可变宽度内容

使用 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>Code language: HTML, XML (xml)

响应式断点用法

所有断点统一（xs 到 xl 一致）

<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>Code language: HTML, XML (xml)

堆叠到水平（小屏堆叠，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>Code language: HTML, XML (xml)

在超小屏（< 576px）上两列各占 100% 垂直堆叠，sm 及以上并排。

混合断点组合

<div class="container">
  <!-- 手机上第一列全宽，第二列半宽；平板上分别 8 和 4 -->
  <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>

  <!-- 手机上半宽，平板以上三分之一宽 -->
  <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>

  <!-- 始终半宽 -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>Code language: HTML, XML (xml)

间距调整（Gutter 定制）

通过 padding 和负 margin 工具类响应调整列间距：

<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>Code language: HTML, XML (xml)

对齐方式

垂直对齐

行级控制（影响所有列）：

<div class="row align-items-start">...</div>   <!-- 顶部对齐 -->
<div class="row align-items-center">...</div>  <!-- 垂直居中 -->
<div class="row align-items-end">...</div>     <!-- 底部对齐 -->Code language: HTML, XML (xml)

单列控制：

<div class="col align-self-start">...</div>    <!-- 顶部 -->
<div class="col align-self-center">...</div>   <!-- 居中 -->
<div class="col align-self-end">...</div>      <!-- 底部 -->Code language: HTML, XML (xml)

水平对齐

<div class="row justify-content-start">...</div>    <!-- 左对齐 -->
<div class="row justify-content-center">...</div>   <!-- 居中 -->
<div class="row justify-content-end">...</div>     <!-- 右对齐 -->
<div class="row justify-content-around">...</div>  <!-- 分散，首尾有间距 -->
<div class="row justify-content-between">...</div> <!-- 两端对齐，首尾贴边 -->Code language: HTML, XML (xml)

无间距（No Gutters）

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">...</div>
  <div class="col-6 col-md-4">...</div>
</div>Code language: HTML, XML (xml)

no-gutters 清除 row 的负 margin 和所有直接子 col 的左右 padding，实现列与列之间零间距。

列换行与列断裂

当一行中列的总份数超过 12，多余列自动换到新行：

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4（9+4=13 > 12，自动换行）</div>
  <div class="col-6">.col-6（继续在新行上）</div>
</div>Code language: HTML, XML (xml)

使用 w-100 在特定位置强制换行：

<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>
  <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>Code language: HTML, XML (xml)

结合响应式显示工具在特定断点才换行：

<div class="w-100 d-none d-md-block"></div>Code language: HTML, XML (xml)

重新排序

使用 order 类控制视觉顺序：

<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>Code language: HTML, XML (xml)

order-first（order: -1）和 order-last（order: 13）：

<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>Code language: HTML, XML (xml)

偏移列

使用 offset 类将列向右推：

<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>Code language: HTML, XML (xml)

使用 margin 工具类实现偏移（更灵活）：

<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>Code language: HTML, XML (xml)

ml-auto 将剩余空间推到左侧，实现右对齐效果。

嵌套

在已有列内部再放一组 row + col，实现嵌套布局：

<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>Code language: HTML, XML (xml)

嵌套行内的列总数同样最多 12 份，不需要用满。

Posted in Bootstrap4 教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注