布局

容器 Container

容器是 Bootstrap 布局中最基本的元素，用于居中包裹内容：

<div class="container">
    固定宽度居中容器，响应式变化
</div>

<div class="container-fluid">
    全宽容器，始终占满视口宽度
</div>

<div class="container-md">
    在中等屏幕以上为固定宽度，以下为全宽
</div>

类名	Extra small	Small	Medium	Large	XL	XXL
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	始终 100%

响应式断点

Bootstrap 使用媒体查询创建响应式断点，每个断点代表一个屏幕尺寸范围：

// 向上兼容（推荐使用）
@media (min-width: 768px) { ... }  // md 及以上

// 向下兼容
@media (max-width: 767.98px) { ... }  // sm 及以下

// 介于两者之间
@media (min-width: 768px) and (max-width: 991.98px) { ... }  // 仅 md

列宽分配

使用 .row-cols-* 快速设置每行的列数，无需在每列上指定宽度：

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
</div>

间距 Gutter

使用 .g-* 类控制列之间的间距：

<div class="row g-0">   <!-- 无间距 -->
<div class="row g-2">   <!-- 小间距 -->
<div class="row g-4">   <!-- 默认间距 -->
<div class="row g-5">   <!-- 大间距 -->
<div class="row gx-4 gy-2"> <!-- 水平/垂直分别控制 -->

可见性 Visibility

控制元素在不同屏幕下的显示与隐藏：

<div class="d-none d-md-block"> 仅在 md 及以上显示 </div>
<div class="d-lg-none">           在 lg 及以上隐藏 </div>
<div class="d-block d-md-none">   仅在手机端显示 </div>

容器嵌套技巧

容器可以相互嵌套，结合间距类实现复杂布局。常见模式是在全宽容器中嵌入固定宽度容器：

<div class="container-fluid bg-light py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-12">
                <div class="bg-white rounded p-4 shadow-sm">
                    全宽背景色，内容居中
                </div>
            </div>
        </div>
    </div>
</div>

栅格间距 Gutter 详解

g-* 类控制行中列之间的间距。Bootstrap 5 的间距系统基于 --bs-gutter-x 和 --bs-gutter-y CSS 变量：

<!-- 水平间距与垂直间距分别控制 -->
<div class="row gx-5 gy-3">
    <div class="col-6">水平间距大，垂直间距小</div>
    <div class="col-6">水平间距大，垂直间距小</div>
    <div class="col-6">水平间距大，垂直间距小</div>
    <div class="col-6">水平间距大，垂直间距小</div>
</div>

<!-- 移除 gutter -->
<div class="row g-0">
    <div class="col-4">无间距列</div>
    <div class="col-4">无间距列</div>
    <div class="col-4">无间距列</div>
</div>

响应式断点速查表

最佳实践

• 使用 .container 作为最外层布局容器，确保内容居中且响应式
• 需要全宽背景色时，外层用 .container-fluid，内层用 .container 居中内容
• 利用 .row-cols-* 快速创建等宽网格，减少重复的列类声明
• 使用 .g-* 替代在子元素上单独设置外边距，保持间距系统一致性
• 避免过度嵌套容器，保持 DOM 结构扁平以便维护

常见问题