Bootstrap 容器
什么是容器？
容器是 Bootstrap 中最基本的布局元素，用于包含、填充和对齐内容。所有的 Bootstrap 内容都应该放在容器中。
容器类型
Bootstrap 提供了三种不同类型的容器：
1. 固定宽度容器 (.container)
.container 类提供响应式的固定最大宽度容器。
html
<div class="container">
<h1>固定宽度容器</h1>
<p>这个容器在不同屏幕尺寸下有不同的最大宽度。</p>
</div>断点宽度
| 屏幕尺寸 | 类前缀 | 容器最大宽度 |
|---|---|---|
| Extra small | <576px | 100% |
| Small | ≥576px | 540px |
| Medium | ≥768px | 720px |
| Large | ≥992px | 960px |
| X-Large | ≥1200px | 1140px |
| XX-Large | ≥1400px | 1320px |
2. 流体容器 (.container-fluid)
.container-fluid 类提供全宽度容器，跨越视口的整个宽度。
html
<div class="container-fluid">
<h1>流体容器</h1>
<p>这个容器始终占据 100% 的视口宽度。</p>
</div>3. 响应式容器
Bootstrap 还提供了响应式容器类，在指定断点之前为 100% 宽度，之后为固定宽度。
html
<!-- 在 small 断点之前为 100% 宽度 -->
<div class="container-sm">
<h1>Small 响应式容器</h1>
</div>
<!-- 在 medium 断点之前为 100% 宽度 -->
<div class="container-md">
<h1>Medium 响应式容器</h1>
</div>
<!-- 在 large 断点之前为 100% 宽度 -->
<div class="container-lg">
<h1>Large 响应式容器</h1>
</div>
<!-- 在 extra large 断点之前为 100% 宽度 -->
<div class="container-xl">
<h1>Extra Large 响应式容器</h1>
</div>
<!-- 在 extra extra large 断点之前为 100% 宽度 -->
<div class="container-xxl">
<h1>Extra Extra Large 响应式容器</h1>
</div>实际示例
基本容器示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 容器示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-container {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 固定宽度容器 -->
<div class="container demo-container">
<h2>固定宽度容器 (.container)</h2>
<p>这个容器在不同屏幕尺寸下有不同的最大宽度，内容居中显示。</p>
</div>
<!-- 流体容器 -->
<div class="container-fluid demo-container">
<h2>流体容器 (.container-fluid)</h2>
<p>这个容器始终占据 100% 的视口宽度。</p>
</div>
<!-- 响应式容器 -->
<div class="container-md demo-container">
<h2>Medium 响应式容器 (.container-md)</h2>
<p>在 medium 断点（768px）之前为 100% 宽度，之后为固定宽度。</p>
</div>
</body>
</html>嵌套容器
虽然不推荐，但容器可以嵌套使用：
html
<div class="container-fluid">
<div class="container">
<h1>嵌套容器</h1>
<p>外层是流体容器，内层是固定宽度容器。</p>
</div>
</div>容器与网格系统
容器通常与 Bootstrap 的网格系统一起使用：
html
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>左侧内容</h3>
<p>这里是左侧的内容。</p>
</div>
<div class="col-md-6">
<h3>右侧内容</h3>
<p>这里是右侧的内容。</p>
</div>
</div>
</div>容器的内边距
所有容器都有水平内边距（padding），用于防止内容触及容器边缘：
css
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
}选择合适的容器
使用 .container 当：
- 需要内容居中显示
- 希望在大屏幕上限制内容宽度
- 构建传统的网站布局
使用 .container-fluid 当：
- 需要全宽度布局
- 构建仪表板或管理界面
- 希望充分利用屏幕空间
使用响应式容器当：
- 需要在特定断点切换布局行为
- 希望在小屏幕上全宽，大屏幕上固定宽度
最佳实践
- 选择合适的容器类型：根据设计需求选择最适合的容器
- 避免不必要的嵌套：尽量避免容器嵌套，除非有特殊需求
- 配合网格系统使用：容器通常与行和列一起使用
- 保持一致性：在同一个项目中保持容器使用的一致性
下一步
现在你已经了解了 Bootstrap 容器的使用方法，接下来我们将学习强大的网格系统。