Bootstrap: 布局容器

Q: 容器的固定宽度是写死的吗？能改吗？

可以通过 Sass 变量 $container-max-widths 修改各断点的最大宽度值。Phase 5 会详细讲 Sass 定制。

Q: .container 和 .container-fluid 可以一起用吗？

可以。常见做法是：导航栏/横幅用 container-fluid 全宽，内容区用 container 居中。两者互不冲突。

Q: 为什么容器没有垂直方向的内边距？

容器只控制水平方向的居中和宽度限制。垂直间距由工具类（如 py-3 、 my-5 ）或子元素的 margin 控制，下下节课会讲。

Q: container-md 和 container 在桌面端宽度一样吗？

在 md 及以上断点时， container-md 的宽度与 container 完全相同。区别在 md 以下： container 仍然有固定宽度值（但受限于视口），而 container-md 变为 100% 宽度。lg、xl、xxl 同理。

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

掌握 Bootstrap CDN 安装方式（来自第一课）
理解 class 命名规则 {property}{direction}-{size}-{value}

(2) 🎯 你将学到

理解三种容器（container、container-fluid、container-{breakpoint}）的区别
掌握 .container 的响应式宽度变化规律
学会使用 .container-fluid 实现全宽布局
掌握 .container-{breakpoint} 混合模式
能独立在页面中正确选择和使用容器

(3) 痛点

Bob 刚学完 HTML 基础，他发现同一个页面在不同屏幕宽度下左右边距不一致——有时贴边有时留白太多。

(4) 解法

Bootstrap 的容器正是用来解决这个问题的。容器是 Bootstrap 网格系统的基础。所有内容都应该放在容器内，容器提供了正确的对齐和内边距。

(5) 收益

使用容器后，Bob 不用再担心不同屏幕下的边距问题——Bootstrap 的容器自动提供正确的对齐和内边距，让内容在任何屏幕尺寸下都整洁居中。

2. 什么是容器

容器的核心作用是居中和限定宽度。Bootstrap 有三种容器：

容器	行为	典型场景
`.container`	每个断点有固定宽度，断点间跳跃	常规内容区
`.container-fluid`	始终 `width: 100%`	全宽通栏（导航条、横幅）
`.container-{breakpoint}`	在指定断点前为 100%，断点后固定	精细响应式控制

(1) 三种容器对比

HTML

<div class="container">.container - responsive fixed width</div>
<div class="container-fluid">.container-fluid - always 100% width</div>
<div class="container-md">.container-md - 100% below md, fixed above</div>

▶ 试一试

3. .container

.container 是最常用的容器类型。它在每个断点处有预设的最大宽度：

断点	类后缀	屏幕宽度 >=	`.container` 宽度
xs（手机竖屏）	无	0	100%（无固定值）
sm（手机横屏）	`-sm`	576px	540px
md（平板）	`-md`	768px	720px
lg（桌面）	`-lg`	992px	960px
xl（大屏）	`-xl`	1200px	1140px
xxl（超大屏）	`-xxl`	1400px	1320px

▶ 示例：.container 宽度演示

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { background: #f8f9fa; border: 2px solid #0d6efd; padding: 1rem; text-align: center; }
  </style>
</head>
<body>
  <div class="container demo-box">
    This is a .container<br>
    Resize the browser to see its width change at each breakpoint.
  </div>
</body>
</html>

▶ 试一试

4. .container-fluid

.container-fluid 始终保持 100% 宽度，仅保留左右内边距（默认 padding: 0 12px）：

HTML

<div class="container-fluid bg-dark text-white py-3">
  Full-width banner - stretches edge to edge
</div>

▶ 试一试

5. .container-{breakpoint}

.container-{breakpoint} 是 Bootstrap 5 新增的能力：在设定的断点及以下时表现为 100% 宽度，在断点以上时切换到固定宽度。

▶ 示例：响应式断点容器对比

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Breakpoint Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { border: 2px solid #198754; padding: 1rem; margin-top: 1rem; text-align: center; }
  </style>
</head>
<body>
  <div class="container-md demo-box">
    .container-md - full width on mobile, fixed on tablet and up
  </div>
  <div class="container-lg demo-box" style="border-color: #dc3545;">
    .container-lg - full width on tablet, fixed on desktop and up
  </div>
</body>
</html>

▶ 试一试

主要内容区用 .container 或 .container-lg
页眉/页脚/横幅使用 .container-fluid
侧栏/评论区使用 .container-md 在移动端全宽、平板以上居中

6. 容器的嵌套

容器可以嵌套，但注意嵌套的容器会继承父容器的 padding，导致内容区变窄：

HTML

<div class="container" style="border: 2px solid #0d6efd; padding: 1rem;">
  <p>Outer container (blue)</p>
  <div class="container" style="border: 2px solid #198754; padding: 1rem;">
    <p>Nested container (green) - narrower by about 24px each side</p>
  </div>
</div>

▶ 试一试

7. 容器的内边距机制

容器默认有 padding-left: 12px 和 padding-right: 12px。这个间距与网格系统的 gutter 宽度一致，确保容器内的列内容对齐：

graph LR
    A[Browser Edge] -->|12px padding| B[Container Content]
    B -->|12px padding| C[Browser Edge]
    style A fill:#eee,stroke:#999
    style C fill:#eee,stroke:#999
    style B fill:#0d6efd,color:#fff

容器属性	值	说明
`padding-left`	12px	左内边距
`padding-right`	12px	右内边距
`margin-left`	auto	水平居中
`margin-right`	auto	水平居中

(1) 容器内边距 vs 外边距对比

属性	class 示例	效果	应用场景
内边距（padding）	`px-3`	容器内容向中心缩进	防止内容贴边
外边距（margin）	`mx-auto`	容器在父级中居中	水平居中容器
两者结合	`px-3 mx-auto`	容器居中且内容不贴边	标准内容区

8. 容器实战组合示例

▶ 示例：全宽导航栏 + 居中内容区

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid bg-dark text-white py-3">
    <div class="container">
      <span class="fs-4">Brand</span>
    </div>
  </div>
  <div class="container my-4">
    <div class="row">
      <div class="col-8 bg-light p-3 border">Main Content</div>
      <div class="col-4 bg-secondary text-white p-3">Sidebar</div>
    </div>
  </div>
  <div class="container-fluid bg-dark text-white py-3 mt-4">
    <div class="container text-center">&copy; 2026 Footer</div>
  </div>
</body>
</html>

▶ 试一试

▶ 示例：容器嵌套响应式布局

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Containers</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 1rem; }
  </style>
</head>
<body>
  <div class="container outer">
    <h6>Outer .container (blue border area)</h6>
    <div class="container-md inner">
      .container-md — inside .container<br>
      Full width on mobile, fixed on md+
    </div>
  </div>
</body>
</html>

▶ 试一试

▶ 示例：容器宽度调试技巧

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debug Containers</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .dbg { outline: 2px dashed #dc3545; padding: 0.5rem; margin: 1rem 0; }
  </style>
</head>
<body>
  <div class="container dbg">.container</div>
  <div class="container-sm dbg">.container-sm</div>
  <div class="container-md dbg">.container-md</div>
  <div class="container-lg dbg">.container-lg</div>
  <div class="container-xl dbg">.container-xl</div>
  <div class="container-xxl dbg">.container-xxl</div>
  <div class="container-fluid dbg">.container-fluid</div>
</body>
</html>

▶ 试一试

❓ 常见问题

Q 容器的固定宽度是写死的吗？能改吗？

A 可以通过 Sass 变量 $container-max-widths 修改各断点的最大宽度值。Phase 5 会详细讲 Sass 定制。

Q .container 和 .container-fluid 可以一起用吗？

A 可以。常见做法是：导航栏/横幅用 container-fluid 全宽，内容区用 container 居中。两者互不冲突。

Q 为什么容器没有垂直方向的内边距？

A 容器只控制水平方向的居中和宽度限制。垂直间距由工具类（如 py-3、my-5）或子元素的 margin 控制，下下节课会讲。

Q container-md 和 container 在桌面端宽度一样吗？

A 在 md 及以上断点时，container-md 的宽度与 container 完全相同。区别在 md 以下：container 仍然有固定宽度值（但受限于视口），而 container-md 变为 100% 宽度。lg、xl、xxl 同理。

Q 容器内可以再放容器吗？有什么注意事项？

A 可以嵌套，但每层容器都会增加 24px 的左右内边距，导致内层容器实际内容区变窄。如果不想有叠加内边距，可以在内层容器上加 px-0 移除内边距。

📖 小节

Bootstrap 提供三种容器：.container（响应式固定）、.container-fluid（100% 宽度）、.container-{breakpoint}（混合模式）
容器默认 padding: 0 12px，通过 margin: auto 居中
容器只能嵌套 .row、.col-* 或直接放内容
选择容器类型取决于设计需求：通栏用 fluid，居中内容用固定容器

📝 作业

⭐ 创建一个页面，在同一行显示 container、container-fluid、container-md 三个容器，用彩色边框区分。
⭐⭐ 打开浏览器调试工具，将视口分别缩放到 540px、720px、960px、1140px，观察 .container 的宽度变化是否符合预设值。
⭐⭐⭐ 写一个页面：顶部 .container-fluid 深色导航栏，中间 .container 内容区，底部 .container-fluid 页脚。

上一课： Bootstrap 简介与安装 · 下一课： 排版

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

Bootstrap: 布局容器

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

(4) 解法

(5) 收益

2. 什么是容器

(1) 三种容器对比

3. .container

▶ 示例：.container 宽度演示

4. .container-fluid

5. .container-{breakpoint}

▶ 示例：响应式断点容器对比

6. 容器的嵌套

7. 容器的内边距机制

(1) 容器内边距 vs 外边距对比

8. 容器实战组合示例

▶ 示例：全宽导航栏 + 居中内容区

▶ 示例：容器嵌套响应式布局

▶ 示例：容器宽度调试技巧

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好