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