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）。

通過簡單的類名組合，就能讓你的頁面在各種設備上“自適應”，無需手動寫媒體查詢！多動手練習不同斷點的列布局，很快就能掌握~