Bootstrap 容器

什么是容器？

容器是 Bootstrap 中最基本的布局元素，用于包含、填充和对齐内容。所有的 Bootstrap 内容都应该放在容器中。

容器类型

Bootstrap 提供了三种不同类型的容器：

1. 固定宽度容器 (.container)

.container 类提供响应式的固定最大宽度容器。

<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 类提供全宽度容器，跨越视口的整个宽度。

<div class="container-fluid">
    <h1>流体容器</h1>
    <p>这个容器始终占据 100% 的视口宽度。</p>
</div>

3. 响应式容器

Bootstrap 还提供了响应式容器类，在指定断点之前为 100% 宽度，之后为固定宽度。

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

实际示例

基本容器示例

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

嵌套容器

虽然不推荐，但容器可以嵌套使用：

<div class="container-fluid">
    <div class="container">
        <h1>嵌套容器</h1>
        <p>外层是流体容器，内层是固定宽度容器。</p>
    </div>
</div>

容器与网格系统

容器通常与 Bootstrap 的网格系统一起使用：

<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），用于防止内容触及容器边缘：

.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 容器的使用方法，接下来我们将学习强大的网格系统。

下一章：Bootstrap 网格系统 →

#Bootstrap 容器

#什么是容器？

#容器类型

#1. 固定宽度容器 (.container)

#断点宽度

#2. 流体容器 (.container-fluid)

#3. 响应式容器

#实际示例

#基本容器示例

#嵌套容器

#容器与网格系统

#容器的内边距

#选择合适的容器

#使用 .container 当：

#使用 .container-fluid 当：

#使用响应式容器当：

#最佳实践

#下一步