在前端開發中，頁面佈局是基礎也是核心。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 佈局的便捷。