Bootstrap 5 容器

Bootstrap 5 容器

從前一章中您學到了，Bootstrap 需要包含元素來包裝站點內容。

我們在容器中填充內容，并且有兩個容器類可用：

  • .container 類提供了響應式的固定寬度容器
  • .container-fluid 類提供了全寬容器，跨越視口的整個寬度

固定容器

使用 .container 類創建響應式、固定寬度的容器。

請注意，它的寬度（max-width）會在不同的屏幕尺寸上發生變化：

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

請打開下面的例子并調整瀏覽器窗口的大小，來查看容器寬度在不同斷點處發生的變化：

實例

<div class="container">
  <h1>我的第一張 Bootstrap 頁面</h1>
  <p>這是一些文本。</p>
</div>

親自試一試

XXL 斷點（≥1400px）是 Bootstrap 5 中新增的，而 Bootstrap 4 中最大的斷點是 Extra large（≥1200px）。

流體容器

使用 .container-fluid 類創建全寬容器，它總是跨越整個屏幕寬度（width 總是 100%）：

實例

<div class="container-fluid">
  <h1>我的第一張 Bootstrap 頁面</h1>
  <p>這是一些文本。</p>
</div>

親自試一試

容器填充

默認情況下，容器有左右填充（左右內邊距），沒有頂部或底部填充（上下內邊距）。因此，我們常使用 spacing 工具（utilities），諸如額外的填充和邊距，使它們看起來更好。例如，.pt-5 的意思是“添加一個大的頂部填充”：

實例

<div class="container pt-5"></div>

親自試一試

容器邊框和顏色

其他工具，諸如邊框和顏色，也經常與容器一起使用：

實例

<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 將在不同的屏幕尺寸/視口上發生變化：

類 Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥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>

親自試一試