Bootstrap 5 網格實例
- 上一頁 BS5 網格 XXL
- 下一頁 BS5 基礎模板
下面我們整理了一些 Bootstrap 5 網格布局的實例。
三等分列
在指定數量的元素上使用 .col 類，Bootstrap 將識別有多少元素（并創建等寬列）。在下面的例子中，我們使用了三個 col 元素，每個元素的寬度為 33.33%。
實例
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
使用數字的三個相等的列
您還可以使用數字來控制列寬。只需確保總和等于或小于 12（不需要使用所有 12 個可用列）：
實例
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
三不等分列
如需創建不相等的列，您必須使用數字。下例將創建 25%/50%/25% 的拆分：
實例
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
設置一列寬度
然而，只設置一列的寬度就足夠了，并讓兄弟列在周圍自動調整尺寸。下例將創建 25%/50%/25% 的拆分：
實例
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
更多相等的列
實例
<!-- 兩個相等的列 --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- 四個相等的列 --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- 六個相等的列 --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
您還可以使用 .row-cols-* 類控制應該出現在彼此旁邊的列數（無論有多少列）：
實例
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
更多不等列
實例
<!-- 兩個不相等的列 --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- 四個不相等的列 --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
等高
如果一列比另一列高（由于文本或 CSS 高度），其余的將跟隨：
實例
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
嵌套的列
下例展示了如何創建兩列布局，其中一列內有另外兩列：
實例
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
響應類
Bootstrap 5 網格系統有五個類：
.col-(超小型設備 - 屏幕寬度小于 576px).col-sm-(小型設備 - 屏幕寬度等于或大于 576px).col-md-(中型設備 - 屏幕寬度等于或大于 768 像素).col-lg-(大型設備 - 屏幕寬度等于或大于 992 像素).col-xl-(xlarge 設備 - 屏幕寬度等于或大于 1200px).col-xxl-(xxlarge 設備 - 屏幕寬度等于或大于 1400px)
可以組合上述類以創建更動態和靈活的布局。
提示：每個類都按比例放大，因此如果您希望為 sm 和 md 設置相同的寬度，則只需指定 sm。
堆疊到水平
下例展示了如何創建列布局，該布局開始時在超小型設備上堆疊，然后在較大設備（sm、md、lg 和 xl）上變為水平布局：
實例
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix 和 Match
實例
<!-- 在超小型設備上 50%/50% 拆分，在大型設備上 75%/25% 拆分 --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- 在超小型、小型、中型設備上 58%/42% 拆分，在大型和超大型設備上 66.3%/33.3% 拆分 --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- 在小型設備上 25%/75% 拆分，在中型設備上 50%/50% 拆分，在大型和超大型設備上 33%/66% 拆分。在超小型設備上，會自動堆疊（100%） --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
無 gutter
如需更改列之間的間距（額外的空間），請使用任何 .g-1|2|3|4|5 類（.g-4 是默認值）。
如需完全刪除裝訂線（gutter），請使用 .g-0：
實例
<div class="row g-0">
- 上一頁 BS5 網格 XXL
- 下一頁 BS5 基礎模板
