在前端开发中，页面布局是基础也是核心。Bootstrap 5 作为主流的前端框架，提供了一套简洁高效的响应式布局系统，让我们能快速构建美观且适配不同设备的页面。今天我们就来学习 Bootstrap 5 中最基础的布局结构——容器（Container）、行（Row）、列（Column），以及它们的嵌套使用方法。
一、容器（Container）：布局的“盒子”¶
容器是 Bootstrap 布局的基础，它的作用是包裹页面内容，控制内容的宽度并使其居中对齐。就像给内容套了一个“包装盒”，让内容不会在浏览器中撑满全屏，同时保持美观的间距。
1. 常用容器类¶
Bootstrap 5 提供了两种最常用的容器类：
- .container：固定宽度的容器，在不同屏幕尺寸下会自动调整最大宽度，始终居中显示内容。例如：
- 小屏幕（sm）以下，宽度为 100%；
- 中等屏幕（md）以上，宽度为 768px；
- 大屏幕（lg）以上，宽度为 992px，依此类推。
- .container-fluid：全宽容器，宽度始终为 100%，没有固定边界，内容会从屏幕左侧到右侧满屏显示。
2. 容器示例¶
<!-- 固定宽度容器 -->
<div class="container">
<p>我是居中的固定宽度内容</p>
</div>
<!-- 全宽容器 -->
<div class="container-fluid">
<p>我是全屏宽度内容</p>
</div>
二、行（Row）：列的“水平载体”¶
行是用来包裹列的横向容器，它通过负边距抵消容器的内边距，让列能“紧贴”容器的左右边缘，实现紧密排列。行必须直接嵌套在容器内部，不能单独使用。
1. 行的核心作用¶
- 提供网格系统的“横向轴”，让列在一行内水平排列；
- 通过
display: flex特性，实现列的自动等高、分布对齐等效果。
2. 行的使用规则¶
- 行必须嵌套在容器（
.container或.container-fluid）内； - 行内部只能包含列（
.col-*类），不能直接放置其他内容； - 每行最多包含 12 列（Bootstrap 5 基于 12 列网格系统）。
3. 行示例¶
<div class="container">
<div class="row"> <!-- 行必须在容器内 -->
<div class="col">列1</div>
<div class="col">列2</div>
<div class="col">列3</div>
</div>
</div>
三、列（Column）：12 列网格的“单元格”¶
Bootstrap 5 的列基于 12 列网格系统，每列的宽度通过“列数”决定（总列数为 12）。列的类名格式为 col-[断点]-[列数]，例如 col-md-4 表示“在中等屏幕及以上，该列占 4 列宽度”。
1. 断点与列命名规则¶
- 断点：Bootstrap 5 的屏幕断点有 5 种：
sm（576px）：小屏幕md（768px）：中等屏幕lg（992px）：大屏幕xl（1200px）：超大屏幕xxl（1400px）：极大屏幕- 列数：12 列网格中，每列的宽度占比 =
当前列数 / 12。例如col-md-4占 4/12 = 33.33% 宽度。
2. 列示例¶
横向排列（基础）：
<!-- 一行内放 3 列，每列占 4 列 -->
<div class="container">
<div class="row">
<div class="col-md-4">占 4 列（中等屏幕以上）</div>
<div class="col-md-4">占 4 列</div>
<div class="col-md-4">占 4 列</div>
</div>
</div>
响应式排列：不同断点下显示不同列数（如手机端单列，平板端两列）：
<div class="container">
<div class="row">
<!-- 小屏幕（sm）及以上占 6 列，手机端（<576px）占 12 列 -->
<div class="col-sm-6 col-12">手机端单列，平板端双列</div>
<div class="col-sm-6 col-12">手机端单列，平板端双列</div>
</div>
</div>
四、列嵌套：在列中再次布局¶
当需要在某个列内部再进行布局时（即“大列套小列”），就需要用到列嵌套。嵌套布局的核心是：在目标列中再次使用 .row 和 .col-* 组合。
1. 嵌套规则¶
- 嵌套的
.row放在父列内部； - 内部
.row同样遵循 12 列网格，列数总和不超过 12； - 父列的宽度不影响内部嵌套的行和列（负边距会自动抵消）。
2. 嵌套示例¶
需求：一个 8 列的大列，内部再分成两个 6 列的小列；右侧 4 列单独显示。
<div class="container">
<div class="row">
<!-- 父列（占 8 列） -->
<div class="col-md-8">
<div class="row"> <!-- 嵌套行 -->
<div class="col-md-6">小列1（父列内占 6 列）</div>
<div class="col-md-6">小列2（父列内占 6 列）</div>
</div>
</div>
<!-- 子列（占 4 列） -->
<div class="col-md-4">右侧列（单独显示）</div>
</div>
</div>
效果：父列（8 列）内部用嵌套行分成两个 6 列（共 12 列），右侧 4 列独立显示，整体每行列数总和为 12（8+4）。
五、总结¶
Bootstrap 5 的布局核心是“容器包裹行，行包裹列，列内可嵌套”。关键规则如下：
1. 容器（.container/.container-fluid）是布局的“大盒子”，固定或全宽；
2. 行（.row）是容器内的“横向行”，包裹列，必须在容器内；
3. 列（.col-*）是核心“单元格”，基于 12 列网格系统，通过断点控制响应式；
4. 嵌套：在列内用 .row 再次包裹小列，实现多层级布局。
动手实践是掌握的关键！试着用上述方法搭建一个简单页面，调整不同断点的列数，感受 Bootstrap 5 布局的便捷。