Skip to content

建立 2024-01-01 更新 2026-09-15

網格系統

網格系統（Grid System）用 12 欄 切版。同一列裡各欄數字加起來是 12，就是滿版；超過 12 會換到下一行。這是 Bootstrap 最核心的排版方式，對應官方 Grid。

三層結構

<div class="container">
  <div class="row">
    <div class="col-6">左邊 6 欄</div>
    <div class="col-6">右邊 6 欄</div>
  </div>
</div>
class 作用
container 有最大寬度、水平置中；滿版用 container-fluid
row 一列，裡面放欄。它用負 margin 把欄的 gutter 對齊容器
col-6 佔 12 欄中的 6 欄，也就是一半寬

只寫 col（不帶數字）會讓同列的欄均分剩餘寬度。

斷點：手機優先

Bootstrap 是 mobile first：col-6 從最小螢幕就生效；加上 sm／md／lg 是「從這個寬度以上」才改欄數。沒寫較小斷點時，小螢幕會自動變成直向堆疊（等於佔滿 12 欄）。

前綴 最小寬度 典型裝置
（無，如 col-6） 0 所有寬度
sm ≥ 576px 大手機／小平板
md ≥ 768px 平板
lg ≥ 992px 筆電
xl ≥ 1200px 桌面
xxl ≥ 1400px 寬螢幕 
<div class="row">
  <div class="col-md-4">平板以上佔 1/3；手機直向堆疊</div>
  <div class="col-md-8">平板以上佔 2/3</div>
</div>

同一個元素可以寫多個斷點，例如 col-12 col-md-6 col-lg-4：手機全寬、平板一半、桌面三分之一。

常見用法

  • 兩欄文章：col-lg-8 本文 + col-lg-4 側欄。
  • 卡片列表：col-sm-6 col-lg-3 讓四張卡片在桌面並排、手機兩張或一張。
  • gutter 用 g-3、gx-4、gy-2 調欄間距，不必自寫 margin。

欄必須包在 row 裡

col-* 單獨放在 container 外面，間距與換行會不如預期。固定記住：container → row → col。

推薦影音

來源：CSS coke（金魚都能懂）　繁體中文

從容器、12 等分、到不同裝置寫不同 col-*。適合對照本頁表格一起看。