Skip to main content Skip to docs navigation
View on GitHub

容器 (Containers)

容器是 Bootstrap 的基本建構區塊，在給定的設備或是視區中包含、填充和對齊你的內容

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去
On this page

如何使用

容器是 Bootstrap 中最基本的佈局元素，在使用我們的網格系統時是必需的。容器用於在容納，填充和（有時）使內容居中。儘管容器 可以 巢狀，但大部分排版不需要巢狀。

Bootstrap 本身自帶三種不同的容器：

  • .container, 每一個響應式斷點都會設置一個 max-width
  • .container-fluid, 所有斷點都是 width: 100%
  • .container-{breakpoint}, 直到指定斷點之前，都會是 width: 100%

下表說明了每個容器的 max-width 與每個斷點處的原始 .container 和 .container-fluid 的比較。

可以在實際操作中觀看它們，並在我們的網格範例中進行比較。

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		X-Large
≥1200px 		XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.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
.container-fluid 100% 100% 100% 100% 100% 100%

預設容器

我們的預設類別 .container 是響應式的, 是一個響應的、固定寬度的 container，內含的 max-width 會在每個斷點中改變數值

<div class="container">
  <!-- Content here -->
</div>

響應式容器

使用響應式容器時將會保持在寬度 100%，直到達到指定斷點為止，接下來我們將針對每個較高的斷點設置 max-width。例如，.container-sm 在到達 sm 斷點之前的寬度都為 100％，之後它將以 md、lg、xl 和 xxl 設置。

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

流體容器

針對容器使用 .container-fluid, 它將橫跨可視區域的整個寬度。

<div class="container-fluid">
  ...
</div>

Sass

如上面範例所示，Bootstrap 預設會生成一系列的容器類別，以幫助您建立您所需要的佈局。您可以通過修改 Sass 原始碼 （在 _variables.scss 中找到）來自定義這些預定義的容器類別：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

除了自定義 Sass 之外，您還可以使用我們的 Sass mixin 建立自己的容器。

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

有關如何修改 Sass 原始碼以及變數，請參考Grid 文件中的 Sass.