Bootstrap 5 容器
Bootstrap 5 容器
從上一章中您瞭解到，Bootstrap 需要一個容器元素來包裹網站內容。
容器用於填充其內部的內容，並且有兩種可用的容器類：
.container類提供了一個響應式的固定寬度容器.container-fluid類提供了一個全寬度容器，跨越視口的整個寬度
.container
.container-fluid
固定容器
使用 .container 類來建立響應式的、固定寬度的容器。
請注意，其寬度（max-width）在不同的螢幕尺寸下會有所不同。
| 超小屏 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大尺寸 ≥1200px |
XXL ≥1400px |
|
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
開啟下面的示例並調整瀏覽器視窗的大小，以檢視容器寬度在不同斷點處的變化。
XXL 斷點（≥1400px）是 Bootstrap 5 中的新內容，而 Bootstrap 4 中的最大斷點是 Extra large（≥1200px）。
流式容器
使用 .container-fluid 類來建立始終跨越整個螢幕寬度的全屏容器（width 始終為 100%）。
示例
<div class="container-fluid">
<h1>我的第一個 Bootstrap 頁面</h1>
<p>This is some text.</p>
</div>
自己動手試一試 »
容器內邊距
預設情況下，容器具有左側和右側填充，沒有頂部或底部填充。因此，我們經常使用間距工具，例如額外的填充和邊距，使其看起來更好。例如，.pt-5 表示“新增大號頂部填充”。
容器邊框和顏色
其他工具，如邊框和顏色，也經常與容器一起使用。
示例
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
自己動手試一試 »
您將在後面的章節中瞭解更多關於顏色和邊框工具的內容。
響應式容器
您還可以使用 .container-sm|md|lg|xl 類來確定容器何時應具有響應性。
max-width 容器的寬度將在不同的螢幕尺寸/視口下發生變化。
| 類 | 超小屏 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大 ≥1200px |
XXL ≥1400px |
|---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
示例
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
自己動手試一試 »
您知道嗎？
W3.CSS 是 Bootstrap 5 的絕佳替代品。
如果您想學習 W3.CSS，請訪問我們的 W3.CSS 教程。
