Bootstrap 5 網格 XXL
XXL 網格示例
| 超小號 | 小 | 中 | 大 | 特大尺寸 | XXL | |
|---|---|---|---|---|---|---|
| 類字首 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 螢幕寬度 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
XXL 裝置被定義為螢幕寬度從 1400 畫素及以上。
以下示例將在中型、大型和超大型裝置上產生 50%/50% 的分割，在 XXL 裝置上產生 25%/75% 的分割。在小型和超小型裝置上，它將自動堆疊（100%）
col-md-6 col-xxl-3
col-md-6 col-xxl-9
示例
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »
注意：確保總和始終為 12。
僅使用 XXL
在下面的示例中，我們只指定了 .col-xxl-6 類（沒有 .col-md-* 和/或 .col-sm-*）。這意味著超大型裝置將按 50%/50% 分割。但是，對於超大、大、中、小和超小型裝置，它將垂直堆疊（100% 寬度）
示例
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xxl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »
自動佈局列
在 Bootstrap 5 中，有一種簡單的方法可以為所有裝置建立等寬列：只需從 .col-xxl-* 中刪除數字，並僅在指定數量的 col 元素上使用 .col-xxl 類。Bootstrap 將識別有多少列，並且每列將獲得相同的寬度。
如果螢幕尺寸 小於 1400 畫素，則列將水平堆疊。
<!-- 兩列：在 XXL 及以上裝置上寬度為 50% -->
<div class="row">
<div class="col-xxl">1 of 2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- 四列：在 XXL 及以上裝置上寬度為 25% -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3 of 4</div>
<div class="col-xxl">4 of 4</div>
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
