Bootstrap5网格系统详解：容器、行、列与断点设置

什么是Bootstrap网格系统？¶

在网页开发中，布局是核心。Bootstrap5的网格系统就像一套“预制积木”，让你无需从零开始写CSS，就能快速实现响应式布局（不同屏幕自动适配）和页面分栏。它基于“12列网格”理念，通过简单的类名组合，就能让页面在手机、平板、电脑等设备上都显示得整整齐齐。

一、容器（Container）：布局的“边界”¶

容器是网格系统的“根”，所有行和列都必须放在容器内。Bootstrap5提供两种容器：

.container：固定宽度的容器，会根据屏幕宽度自动居中，并且在不同断点下有最大宽度限制（比如xl断点对应1200px，xxl对应1400px）。适合大多数场景，比如网页内容居中显示。
.container-fluid：占满整个屏幕宽度的容器，没有最大宽度限制，适合需要全屏宽度的布局（比如导航栏、横幅）。

示例：

<div class="container">  <!-- 固定宽度居中容器 -->
  <div class="container-fluid">  <!-- 全屏容器（嵌套在固定容器内，仅示例） -->
    <!-- 行和列写在这里 -->
  </div>
</div>

二、行（Row）：列的“载体”¶

行用来包裹列，它有两个关键作用：
1. 抵消容器的内边距，让列能紧贴容器边缘；
2. 用负边距（margin）让列在一行内均匀分布，并通过display: flex实现自动换行。

注意：行不能单独存在，必须嵌套在容器内！

三、列（Column）：内容的“画布”¶

列是网格的核心，基于12列布局规则（一行最多12列）。列的宽度通过类名控制，格式为.col-[断点]-[列数]，其中“列数”表示这列占12列中的几份（1-12）。

1. 基础列类（无断点）¶

.col-1 到 .col-12：在所有设备上，列数固定。例如：
.col-6：占12列中的6份（即50%宽度）；
.col-4：占12列中的4份（即33.33%宽度）。

示例（两列布局）：

<div class="container">
  <div class="row">  <!-- 行包裹列 -->
    <div class="col-6">左边内容</div>
    <div class="col-6">右边内容</div>
  </div>
</div>

在任何屏幕下，两列各占50%宽度。

2. 响应式列类（带断点）¶

通过断点（如sm、md、lg），可以让列在不同屏幕宽度下自动调整布局。Bootstrap5的断点规则：

断点	类名前缀	屏幕宽度范围	示例
超小屏幕（手机）	无前缀	<576px	（默认占12列）
小屏幕（平板竖屏）	.sm-	≥576px	.col-sm-6
中等屏幕（平板横屏）	.md-	≥768px	.col-md-4
大屏幕（电脑）	.lg-	≥992px	.col-lg-3
超大屏幕（大屏电脑）	.xl-	≥1200px	.col-xl-2
超超大屏幕（4K）	.xxl-	≥1400px	.col-xxl-2

示例（响应式三列布局）：
需求：在手机上（<576px）两列堆叠，在平板（≥576px）分成两列，在电脑（≥992px）分成三列。
代码：

<div class="container">
  <div class="row">
    <!-- 手机：12列（默认），平板：6列，电脑：4列 -->
    <div class="col-sm-6 col-md-4 col-lg-3">内容1</div>
    <div class="col-sm-6 col-md-4 col-lg-3">内容2</div>
    <div class="col-sm-12 col-md-4 col-lg-3">内容3</div>
  </div>
</div>

解释：
在手机（<576px）：所有列默认占12列（.col-sm-6失效，因为sm是≥576px），所以三列会堆叠成垂直排列；
在平板（576px~767px）：sm断点生效，前两列各占6列（2列并排），第三列占12列（单独一行）；
在电脑（≥992px）：lg断点生效，每列占3列（12/4=3），所以三列并排显示。

四、断点设置实战¶

核心逻辑：用“断点前缀+列数”控制列宽度，断点越大，优先级越高（覆盖小断点设置）。

案例：简单的导航栏底部布局

<div class="container">
  <div class="row">
    <!-- 小屏幕：4列并排；中等屏幕：3列并排；大屏幕：2列并排 -->
    <div class="col-sm-4 col-md-3 col-lg-2">功能1</div>
    <div class="col-sm-4 col-md-3 col-lg-2">功能2</div>
    <div class="col-sm-4 col-md-3 col-lg-2">功能3</div>
    <div class="col-sm-4 col-md-3 col-lg-2">功能4</div>
    <div class="col-sm-4 col-md-3 col-lg-2">功能5</div>
    <div class="col-sm-4 col-md-3 col-lg-2">功能6</div>
  </div>
</div>

五、列间距与对齐¶

列间距：默认列之间有15px的padding，可通过.gap-*类调整（如.gap-2缩小间距，.gap-4增大间距）。

  <div class="row gap-3">  <!-- 列间距设为1.5rem（默认是1rem） -->
    <div class="col-6">内容1</div>
    <div class="col-6">内容2</div>
  </div>

内容对齐：通过.text-start（左对齐）、.text-center（居中）、.text-end（右对齐）控制列内文字对齐；
用.align-items-start（顶部对齐）、.align-items-center（居中）、.align-items-end（底部对齐）控制行内垂直对齐。

总结¶

Bootstrap5网格系统的核心是“容器→行→列”三级结构，配合断点规则实现响应式布局。记住：
1. 容器是“边界”，行是“容器内的行”，列是“行内的内容单元”；
2. 列基于12列网格，类名格式为.[断点]-[列数]（如.md-4表示中等屏幕占4列）；
3. 断点从手机到大屏依次是sm（576px）、md（768px）、lg（992px）、xl（1200px）、xxl（1400px）。