容器是Bootstrap布局系统的基本构建块。容器用于：
在Bootstrap中，几乎所有的内容都应该放在容器内部，以确保正确的对齐和填充。
容器为内容提供了结构和约束，使布局更加一致和可预测。
Bootstrap 5 提供了三种类型的容器，每种都有不同的响应式行为。
.container 类提供了一个响应式的固定宽度容器。
它在每个断点处设置不同的 max-width：
<div class="container">
<!-- 内容 -->
</div>.container-fluid 类提供一个全宽容器，跨越视口的整个宽度。
它没有设置最大宽度，始终占据可用宽度的100%。
适用于：
<div class="container-fluid">
<!-- 内容 -->
</div>响应式容器在达到指定断点之前是100%宽度的，之后变为固定宽度。
可用的类：
.container-sm.container-md.container-lg.container-xl.container-xxl适用于需要特定断点行为的布局。
<div class="container-lg">
<!-- 在 lg 断点前为全宽 -->
</div>| 容器类型 | 超小屏幕 (<576px) | 小屏幕 (≥576px) | 中屏幕 (≥768px) | 大屏幕 (≥992px) | 超大屏幕 (≥1200px) | 特大屏幕 (≥1400px) |
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 540px | 540px | 540px | 540px |
.container-md |
100% | 100% | 720px | 720px | 720px | 720px |
.container-lg |
100% | 100% | 100% | 960px | 960px | 960px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1140px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
调整浏览器窗口大小，观察容器宽度的变化：
这是默认容器内的内容。
在不同屏幕尺寸下，容器宽度会响应式变化。
<div class="container">
<div class="row">
<div class="col">
<p>这是默认容器内的内容。</p>
<p>在不同屏幕尺寸下，容器宽度会响应式变化。</p>
</div>
</div>
</div>流体容器始终占据视口的全部宽度：
这是流体容器内的内容。
无论屏幕尺寸如何，容器始终占据100%宽度。
<div class="container-fluid">
<div class="row">
<div class="col">
<p>这是流体容器内的内容。</p>
<p>无论屏幕尺寸如何，容器始终占据100%宽度。</p>
</div>
</div>
</div>响应式容器在达到指定断点前是全宽的：
这是响应式容器 (.container-lg) 内的内容。
在大屏幕(≥992px)之前是全宽的，之后变为固定宽度。
<div class="container-lg">
<div class="row">
<div class="col">
<p>这是响应式容器 (.container-lg) 内的内容。</p>
<p>在大屏幕(≥992px)之前是全宽的，之后变为固定宽度。</p>
</div>
</div>
</div>容器可以嵌套使用，但通常不推荐：
外层容器
内层嵌套容器
注意：嵌套容器可能导致不必要的填充和布局问题。
<div class="container">
<p>外层容器</p>
<div class="container">
<p>内层嵌套容器</p>
<p>注意：嵌套容器可能导致不必要的填充和布局问题。</p>
</div>
</div>.container 用于大多数常规布局.container-fluid 用于全宽设计