版面配置與格狀系統

使用功能強大的行動優先彈性盒狀格狀 (透過 <b-container>、<b-row>、<b-form-row> 和 <b-col> 元件) 來建構各種形狀和尺寸的版面配置，這要歸功於 12 欄系統、5 個預設回應層級、CSS Sass 變數和 mixin 以及數十個預先定義的類別。

BootstrapVue 提供了幾個方便的函式元件，專門用於版面配置，與傳統的 Bootstrap v4 標記相比，它們可以簡化您的複雜頁面標記。您可以自由地在傳統 Bootstrap v4 標記 (即 <div> 和類別) 與 BootstrapVue 方便的函式性版面元件之間進行切換。

它是如何運作的

Bootstrap 的格狀系統使用一系列的容器、列和欄位來配置和排列內容。它使用 flexbox 建構，並且具有完全的回應能力。以下是範例和深入探討格狀如何組合起來。

<b-container class="bv-example-row">
  <b-row>
    <b-col>1 of 3</b-col>
    <b-col>2 of 3</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-how-it-works.vue -->

以上範例使用 Bootstrap v4 預先定義的格線類別，在小、中、大及更大的裝置上建立三個等寬欄。這些欄會使用父層.container置中在頁面上。

分解其運作方式如下：

容器提供了一個方法，來置中並在水平方向對齊您的網站內容。使用 <b-container> 以獲得動態像素寬度，或使用 <b-container fluid> 以獲得width: 100%，涵蓋所有視窗和裝置大小。
列是欄的包裝器。每一個欄都有水平 padding（稱為間隔），用來控制它們之間的間距。然後這個padding會在列中使用負邊界距離來抵銷。這樣一來，您的欄中所有內容在視覺上會沿著左側對齊。
在格線配置中，內容必須放置在欄中，而且只有欄可以是列的直接下層元素。
感謝彈性盒狀模型，沒有設定寬度的格線欄會自動以相等寬度配置。例如，四個<b-col sm="auto">實例會在小斷點中自動各自為 25% 寬。
欄屬性 cols 指出您想要使用每列 12 個欄位中的幾個欄位，而不用考慮斷點（從斷點 xs 開始）。因此，如果您想要在任何斷點處有三個等寬欄，您可以使用 <b-col cols="4">。
欄屬性 sm, md, lg, xl 指出您想要使用每列 12 個欄位中的幾個欄位，在不同的斷點處。因此，如果您想要在斷點 sm 處有三個等寬欄位，您可以使用 <b-col sm="4">。特殊值 auto 可用來佔用一行中剩餘的可用欄位空間。
欄 widths 以百分比設定，因此它們總是動態的，並且相對於它們的父元素進行調整。
欄有水平 padding 以在個別欄之間建立間隔，然而，您可以透過在 <b-row> 上設定 no-gutters 屬性，以及在 <b-col> 上設定 padding 來移除margin。
為了讓格線具有動態反應能力，有五個格線斷點，各自用於不同的動態反應斷點：所有斷點（極小）、小、中、大、更大。
網格中斷點是基於最小寬度媒體查詢，表示它們套用在那一個中斷點和其上方所有中斷點（例如，<b-col sm="4"> 套用到小型、中型、大型及超大型裝置，但不套用於第一個 xs中斷點）。
您可以使用預先定義的網格類別或 Sass 混搭，以獲得更多語義標記。

須注意 Flexbox 的限制和錯誤，例如：無法使用某些 HTML 元素作為 Flexbox 容器。

容器 `<b-container>`

容器（<b-container>）是 Bootstrap 中最基本的版面元素。請選擇有回應式、固定寬度的容器（表示它的 max-width 會在每一個中斷點變更），或使用 fluid prop 設定流體寬度（表示它始終是 100% 寬）。或者，您也可以選擇有回應式的容器，其中容器會一直呈現流體狀態，直到特定的中斷點（這需要使用 Bootstrap CSS v4.4+）。

雖然可以巢狀容器，大部分版面不需要使用巢狀容器。

您可以使用 Bootstrap V4.x SCSS 變數設定預設的中斷點寬度。如需更多詳細資料，請參閱主題化設定參考頁面，以及下方網格選項區段的表格。

預設容器

預設的 <b-container> 是有回應式、固定寬度的容器，這表示其 max-width 會隨著每個檢視埠寬度中斷點而變更。

<b-container>
  <!-- Content here -->
</b-container>

流體寬度容器

對 <b-container> 使用 fluid prop，將會呈現一個容器，其寬度始終為 100%，而不受檢視埠中斷點影響。

<b-container fluid>
  <!-- Content here -->
</b-container>

將 fluid prop 設定為 true（或空字串）等同於 Bootstrap .container-fluid 類別。

有回應式流體容器

需要使用 Bootstrap v4.4+ CSS

回應式容器在 Bootstrap v4.4 中為新增功能。它讓你可以指定一個 100% 寬度 (流動性) 的容器，直到達到特定中斷點，這時會套用 max-width。例如，設定 prop fluid 為 'md' 會產生一個 100% 寬度且一開始會流動的容器，直到達到 'md' 中斷點，這時它會變成標準非流動性容器。

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

將 fluid prop 設定為中斷點名稱會轉換為 Bootstrap class .container-{breakpoint}。

有關預設容器寬度值，請參閱下面的網格選項區段表格。

列 `<b-row>` 和 `<b-form-row>`

列是欄的包裝器。每個欄位都有水平內距（稱為欄間距），用於控制它們之間的空間。此內距接著與負的空白邊界發生對消。這樣一來，你欄位中的所有內容在視覺上都是從左邊對齊的。

你可以透過在 <b-row> 上設定 no-gutters prop 來移除 <b-row> 的空白邊界及 <b-col> 的內距。

或者，對於緊湊的空白邊界（欄位之間較小的欄間距），請使用 <b-form-row> 元件，此元件通常用於配置表單。

欄 `<b-col>`

<b-col> 必須置於 <b-row> 元件，或套用了 row 類別的元素（例如 <div>）中，或者（針對表單）置於 <b-form-row> 元件中（以取得具有更緊湊空白邊界的欄位）。

網格選項

儘管 Bootstrap 使用 em 或 rem 單位來定義大部分尺寸，但 px 用於網格中斷點和容器寬度。這是因為視窗寬度以像素為單位，而且並不會隨著字體大小而改變。

查看 Bootstrap 網格系統在不同裝置上如何運作這個方便的表格。

	超小 (xs) `<576px`	小 (sm) `≥576px`	中 (md) `≥768px`	大 (lg) `≥992px`	超大 (xl) `≥1200px`
容器最大寬度	無 (自動)	540 像素	720 像素	960 像素	1140 像素
屬性	`cols="*"`	`sm="*"`	`md="*"`	`lg="*"`	`xl="*"`
欄位數量	12
欄位間距寬度	30 像素 (欄位兩側各 15 像素)
巢狀	是
偏移	`offset="*"`	`offset-sm="*"`	`offset-md="*"`	`offset-lg="*"`	`offset-xl="*"`
順序	`order="*"`	`order-sm="*"`	`order-md="*"`	`order-lg="*"`	`order-xl="*"`

附註

沒有 xs 屬性。 cols 表示 xs (最小) 斷點。
上述斷點值與名稱為 Bootstrap 預設值。可透過 SCSS 變數來自訂，如果使用自訂斷點名稱，可透過 BootstrapVue 全域設定來設定。

容器大小

下表列出各個不同斷點預設容器最大寬度。如果您使用自訂 Bootstrap v4 SCSS/CSS 主題，這些寬度值可能會有所不同。

容器類型	特小 `<576 像素`	小 `≥576 像素`	中 `≥768 像素`	大 `≥992 像素`	特大 `≥1200 像素`
預設	`100%`	`540 像素`	`720 像素`	`960 像素`	`1140 像素`
`彈性`	`100%`	`100%`	`100%`	`100%`	`100%`
`fluid="sm"`	`100%`	`540 像素`	`720 像素`	`960 像素`	`1140 像素`
`fluid="md"`	`100%`	`100%`	`720 像素`	`960 像素`	`1140 像素`
`fluid="lg"`	`100%`	`100%`	`100%`	`960 像素`	`1140 像素`
`fluid="xl"`	`100%`	`100%`	`100%`	`100%`	`1140 像素`

請參閱上方容器 <b-container> 區段了解更多資訊

自動配置欄位

利用特定斷點的欄位類別，輕鬆設定欄位大小，不需要像 <b-col sm="6"> 這樣具體編寫數字屬性。

等寬欄位

例如，以下兩個網格配置套用至所有裝置與螢幕，範圍為 xs 到 xl。每一種斷點都可以加上任意個無單位類別，所有欄位都將相同寬度。

<b-container class="bv-example-row">
  <b-row>
    <b-col>1 of 2</b-col>
    <b-col>2 of 2</b-col>
  </b-row>

  <b-row>
    <b-col>1 of 3</b-col>
    <b-col>2 of 3</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-equal-width.vue -->

多行等寬

透過在欄位需要換行的位置插入 .w-100，建立跨越多行且等寬的欄位。搭配一些顯示用回應式公用程式，讓換行位置具備回應式。

有一個 Safari flexbox 錯誤，當沒有明確的 flex-basis 或 border 時，會無法正常作用。有適用於舊版瀏覽器版本的解決方法，但如果您鎖定的瀏覽器版本沒有遇到錯誤，就不需要使用這些方法。

<b-container class="bv-example-row">
  <b-row>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <div class="w-100"></div>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<!-- b-grid-equal-width-multiple-lines.vue -->

設定一個欄位的寬度

flexbox 格線欄位的自動版面配置也表示您可以設定一個欄位的寬度，而讓相鄰欄位根據其大小自動調整大小。您可以使用預定義的格線類別（如下所示）、格線混合類或內嵌寬度。請注意，不論置中欄位的寬度為何，其他欄位都會調整大小。

<b-container class="bv-example-row">
  <b-row class="text-center">
    <b-col>1 of 3</b-col>
    <b-col cols="8">2 of 3 (wider)</b-col>
    <b-col>3 of 3</b-col>
  </b-row>

  <b-row class="text-center">
    <b-col>1 of 3</b-col>
    <b-col cols="5">2 of 3 (wider)</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-one-width.vue -->

變動寬度的內容

使用 {breakpoint}="auto" 屬性，根據內容的自然寬度來調整欄位的大小。

<b-container class="bv-example-row">
  <b-row class="justify-content-md-center">
    <b-col col lg="2">1 of 3</b-col>
    <b-col cols="12" md="auto">Variable width content</b-col>
    <b-col col lg="2">3 of 3</b-col>
  </b-row>

  <b-row>
    <b-col>1 of 3</b-col>
    <b-col cols="12" md="auto">Variable width content</b-col>
    <b-col col lg="2">3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-variable-width.vue -->

響應式類別

Bootstrap 的格線包含五層預定義類別，可用於建構複雜的響應式版面配置。您可以隨意自訂在特小、小、中、大或特大裝置上的欄位大小。

所有斷點

對於從最小裝置到最大裝置皆相同的格線，請使用 col 及 cols="*" 屬性。當您需要特定大小的欄位時，請指定 cols 的數量；否則，您可以直接使用 col（如果沒有指定 cols，系統會自動套用）。

<b-container class="bv-example-row">
  <b-row>
    <b-col>col</b-col>
    <b-col>col</b-col>
    <b-col>col</b-col>
    <b-col>col</b-col>
  </b-row>

  <b-row>
    <b-col cols="8">col-8</b-col>
    <b-col cols="4">col-4</b-col>
  </b-row>
</b-container>

<!-- b-grid-size-all-breakpoints.vue -->

由堆疊到橫向

透過使用一組 sm="*" 或 sm（代表在 @sm 有相等寬度）屬性，您可以建立一個基本的格線系統，從在特小裝置上堆疊開始，然後再變為在桌面（中型）裝置上橫向排列。

<b-container class="bv-example-row">
  <b-row>
    <b-col sm="8">col-sm-8</b-col>
    <b-col sm="4">col-sm-4</b-col>
  </b-row>

  <b-row>
    <b-col sm>col-sm</b-col>
    <b-col sm>col-sm</b-col>
    <b-col sm>col-sm</b-col>
  </b-row>
</b-container>

<!-- b-grid-horizontal-stacked.vue -->

混合搭配

不想讓您的欄位在某些格線層堆疊嗎？請根據需要，為每個層搭配使用不同的屬性。請參閱以下範例，深入了解它的運作方式。

<b-container class="bv-example-row">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <b-row>
    <b-col cols="12" md="8">cols="12" md="8"</b-col>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
  </b-row>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <b-row>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
    <b-col cols="6" md="4">cols="6" md="4"</b-col>
  </b-row>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <b-row>
    <b-col cols="6">cols="6"</b-col>
    <b-col cols="6">cols="6"</b-col>
  </b-row>
</b-container>

<!-- b-grid-mix-and-match.vue -->

對齊

使用 flexbox 對齊功能程式，垂直和水平對齊欄位。

註：當 flex 容器具有 min-height 時，Internet Explorer 11 不支援垂直對齊 flex 項目，如下所示。請參閱 Flexbugs #3 以取得更多詳細資料。

垂直對齊

如果要將一行中的所有網格儲存格垂直對齊，請在 align-v 中使用 <b-row> 上的 prop。可能的數值為 'start'、'center'、'end'、'baseline' 和 'stretch'

<b-container class="bv-example-row bv-example-row-flex-cols">
  <b-row align-v="start">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>

  <b-row align-v="center">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>

  <b-row align-v="end">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>

  <b-row align-v="baseline">
    <b-col style="font-size: 0.75rem;">One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col style="font-size: 1.25rem;">One of three columns</b-col>
  </b-row>

  <b-row align-v="stretch">
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
    <b-col>One of three columns</b-col>
  </b-row>
</b-container>

<!-- b-grid-vertical-alignment.vue -->

如果要個別調整網格儲存格的垂直對齊，請在 <b-col> 上使用 align-self prop。可能的數值為 'start'、'center'、'end'、'baseline' 和 'stretch'

<b-container class="bv-example-row bv-example-row-flex-cols">
  <b-row>
    <b-col align-self="start">One of three columns</b-col>
    <b-col align-self="center">One of three columns</b-col>
    <b-col align-self="end">One of three columns</b-col>
  </b-row>
  <b-row>
    <b-col align-self="baseline">One of two columns</b-col>
    <b-col align-self="stretch">One of two  columns</b-col>
  </b-row>
</b-container>

<!-- b-grid-align-self.vue -->

水平對齊

如果要將網格儲存格在同一行中水平對齊，請在 <b-row> 上使用 align-h prop。可能的數值為：'start'、'center'、'end'、'around' 和 'between'

<b-container class="bv-example-row">
  <b-row align-h="start">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="center">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="end">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="around">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>

  <b-row align-h="between">
    <b-col cols="4">One of two columns</b-col>
    <b-col cols="4">One of two columns</b-col>
  </b-row>
</b-container>

<!-- b-grid-horizontal-alignment.vue -->

重新排序

整理欄

使用 order-* props 控製內容的視覺順序。這些 props 具備回應能力，因此您可以依照中斷點設定順序（例如：order="1" order-md="2"）。支援所有五個網格層級從 1 到 12 的數值。 <b-col> 預設的順序數值為 0。

<b-container fluid class="bv-example-row">
  <b-row class="mb-3">
    <b-col>First in DOM, no order applied</b-col>
    <b-col order="5">Second in DOM, with a larger order</b-col>
    <b-col order="1">Third in DOM, with an order of 1</b-col>
  </b-row>

  <b-row class="mb-3">
    <b-col order="6">First in DOM, with order of 6</b-col>
    <b-col order="1">Second in DOM, with an order of 1</b-col>
    <b-col>Third in DOM, no order applied</b-col>
  </b-row>
</b-container>

<!-- b-grid-order.vue -->

順序由 flexbox 的 CSS 樣式 order 控製。

抵銷欄

您可以用兩種方式抵銷網格欄：具備回應能力的 offset-* props 或 margin 實用程式類別。網格 offset-* props 可調整大小以符合欄，而 margin 實用程式類別比較適用於欄寬可變的快速配置。

<b-container fluid class="bv-example-row">
  <b-row>
    <b-col md="4">md="4"</b-col>
    <b-col md="4" offset-md="4">md="4" offset-md="4"</b-col>
  </b-row>

  <b-row>
    <b-col md="3" offset-md="3">md="3" offset-md="3"</b-col>
    <b-col md="3" offset-md="3">md="3" offset-md="3"</b-col>
  </b-row>

  <b-row>
    <b-col md="6" offset-md="3">md="6" offset-md="3"</b-col>
  </b-row>
</b-container>

<!-- b-grid-offset.vue -->

除了在回應式中斷點清除欄之外，您可能還需要在較大中斷點將抵銷設為 0 以重置抵銷

<b-container fluid class="bv-example-row">
  <b-row>
    <b-col sm="5" md="6">sm="5" md="6"</b-col>
    <b-col sm="5" offset-sm="2" md="6" offset-md="0">sm="5" offset-sm="2" md="6" offset-md="0"</b-col>
  </b-row>

  <b-row>
    <b-col sm="6" md="5" lg="6">sm="6" md="5" lg="6"</b-col>
    <b-col sm="6" md="5" offset-md="2" lg="6" offset-lg="0">sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"</b-col>
  </b-row>
</b-container>

<!-- b-grid-offset-reset.vue -->

欄上的 margin 實用程式

在 Bootstrap v4 移至 flexbox 之後，您可以使用 margin 及間距實用程式類別，例如 .mr-auto，強制相臨欄互相遠離。

<b-container fluid class="text-light text-center">
  <b-row class="mb-3">
    <b-col md="4" class="p-3 bg-info">md="4"</b-col>
    <b-col md="4" class="ml-auto p-3 bg-info">md="4" .ml-auto</b-col>
  </b-row>

  <b-row class="mb-3">
    <b-col md="3" class="ml-md-auto p-3 bg-info">md="3" .ml-md-auto</b-col>
    <b-col md="3" class="ml-md-auto p-3 bg-info">md="3" .ml-md-auto</b-col>
  </b-row>

  <b-row>
    <b-col cols="auto" class="mr-auto p-3 bg-info">cols="auto" .mr-auto</b-col>
    <b-col cols="auto" class="p-3 bg-info">cols="auto"</b-col>
  </b-row>
</b-container>

<!-- b-grid-margins.vue -->

嵌套網格

若要將內容巢狀放置在預設格線中，請在現有的 <b-col> 元件中新增一個新的 <b-row> 及一組 <b-col> 元件。巢狀列應包括總和為 12 或更小的欄組（不一定要使用所有 12 個欄位）。

<b-container fluid class="bv-example-row">
  <b-row>
    <b-col sm="9">
      Level 1: sm="9"
      <b-row>
        <b-col cols="8" sm="6">Level 2: cols="8" sm="6"</b-col>
        <b-col cols="4" sm="6">Level 2: cols="4" sm="6"</b-col>
      </b-row>
    </b-col>
  </b-row>
</b-container>

<!-- b-grid-nesting.vue -->

列的欄

需要使用 Bootstrap v4.4+ CSS

在 <b-row> 中使用會回應的 cols-* 屬性，以快速設定欄的數量，以最佳呈現您的內容與版面。欄位的正常寬度套用至個別的 <b-col> 欄（例如，<b-col md="4">），而列欄 col-* 屬性則設定在父層的 <b-row> 中，作為一個捷徑。

使用這些列欄快速建立基本的格線版面，或控制您的卡片版面。在 Bootstrap v4.4 中，列欄的最大預設數目為 6（與一般欄位不同，後者的預設最大值為 12 個欄）。

在 <b-row> 屬性中指定的數值為要每個列建立的欄位數目（而 <b-col> 的屬性則指要佔用的欄位數目）。

<b-container class="bv-example-row mb-3">
  <b-row cols="2">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<b-container class="bv-example-row mb-3">
  <b-row cols="3">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<b-container class="bv-example-row mb-3">
  <b-row cols="4">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<b-container class="bv-example-row">
  <b-row cols="4">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col cols="6">Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<!-- b-grid-row-cols-introduction.vue -->

您可以透過下列 <b-row> 屬性，控制每個中斷點層級的欄位數目：

cols，適用於 xs 以上的畫面
cols-sm，適用於 sm 以上的畫面
cols-md，適用於 md 以上的畫面
cols-lg，適用於 lg 以上的畫面
cols-xl，適用於 xl 以上的畫面

<b-container class="bv-example-row">
  <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6">
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
    <b-col>Column</b-col>
  </b-row>
</b-container>

<!-- b-grid-row-cols-breakpoints.vue -->

版面的效用程式

為了達成更快速的行動裝置友善且具回應能力的開發，Bootstrap 包含數十個效用程式類別，可以用來顯示、隱藏、對齊和調整內容間距。

變更 `display`

使用 Bootstrap 的顯示效用程式，以回應式切換 display 屬性的常見值。與格線系統、內容或元件搭配使用，以在具體視窗中顯示或隱藏它們。

Flexbox 選項

Bootstrap 4 內建彈性盒狀模型，但並非每個元素的 display 都已變更為 display: flex，因為這樣會新增許多不必要的覆寫，並意外變更瀏覽器的主要行為。大多數元件都啟用彈性盒狀模型。

如果你需要將 display: flex 新增至元素，請使用 .d-flex 或任一種類的回應變異（例如 .d-sm-flex）。你將需要這個類別或 display 屬性，才有辦法使用額外的彈性盒狀模型工具程式進行調整大小、對齊以及間距等。

邊界和內距

使用 margin 和 padding 間距工具程式來控制元素和元件的間距和大小。Bootstrap 4 包含五個等級的間距工具程式，基礎為 1rem 的 SASS 預設值 $spacer 變數。為所有檢視埠選擇值（例如 .mr-3 代表 margin-right: 1rem），或選擇回應變異來針對特定檢視埠（例如 .mr-md-3 代表 margin-right: 1rem，從 md 斷點開始）。

切換 `visibility`

在不需要切換 display 時，你可以使用可見度工具程式類別來切換元素的 visibility。不可見的元素仍會影響網頁的配置，但對於訪客來說會是視覺上隱藏的。

元件參考

`<b-container>`

功能性元件

檢視原始碼

<b-container> 屬性
<b-container> 插槽

屬性

所有屬性預設值都可以在全域設定。

屬性	類型	預設值	說明
`彈性`	`Boolean` 或 `String`	`false`	設為 true 時，使得該列永遠寬 100%，或則設定為 Bootstrap 斷點名稱之一，以獲得最大 100% 的寬度（需要有 Bootstrap v4.4+ CSS 才能有特定於斷點的值）
`標籤`	`字串`	`'div'`	指定要呈現的 HTML 標籤，而不是預設標籤

插槽

名稱	說明
`預設`	放置於容器中的內容

`<b-row>`

功能性元件

檢視原始碼

<b-row> 屬性
<b-row> 插槽

屬性

所有屬性預設值都可以在全域設定。

屬性 (按一下以升冪排序)	類型 (按一下以升冪排序)	預設值	說明
`align-content`	`字串`	`null`	垂直軸上列齊所有欄位項目：'start'、'center'、'end'、'around'、'between' 或 'stretch'。對單列項目無作用
`align-h`	`字串`	`null`	所有欄位的水平列齊/間距：'start'、'center'、'end'、'around' 或 'between'
`align-v`	`字串`	`null`	一列中所有欄位的垂直列齊：'start'、'center'、'end'、'baseline' 或 'stretch'
`cols` v2.2.0+	`數字`或`字串`		要在 'xs' 斷點處建立的行列數。需要 Bootstrap v4.4 CSS
`cols-lg` v2.2.0+	`數字`或`字串`		要在 'lg' 斷點處建立的行列數。需要 Bootstrap v4.4 CSS
`cols-md` v2.2.0+	`數字`或`字串`		要在 'md' 斷點處建立的行列數。需要 Bootstrap v4.4 CSS
`cols-sm` v2.2.0+	`數字`或`字串`		要在 'sm' 斷點處建立的行列數。需要 Bootstrap v4.4 CSS
`cols-xl` v2.2.0+	`數字`或`字串`		要在 'xl' 斷點處建立的行列數。需要 Bootstrap v4.4 CSS
`no-gutters`	`布林值`	`false`	若設為 true，移除該行的邊界並移除子欄位的內距
`標籤`	`字串`	`'div'`	指定要呈現的 HTML 標籤，而不是預設標籤

插槽

名稱	說明
`預設`	放置於列中的內容

`<b-col>`

功能性元件

檢視原始碼

<b-col> 屬性
<b-col> 插槽

屬性

所有屬性預設值都可以在全域設定。

屬性 (按一下以升冪排序)	類型 (按一下以升冪排序)	預設值	說明
`align-self`	`字串`	`null`	表格格線參考列的垂直列齊：'start'、'center'、'end'、'baseline' 或 'stretch'
`col`	`布林值`	`false`	若為 true，將建立等寬欄位網格格線，適用 xs 和更高斷點
`cols`	`數字`或`字串`		網格格線橫跨 xs 和更高斷點的欄位數
`lg`	`Boolean` 或 `Number` 或 `String`		適用於 lg 及以上中斷點的網格儲存格跨越的欄位數
`md`	`Boolean` 或 `Number` 或 `String`		適用於 md 及以上中斷點的網格儲存格跨越的欄位數
`offset`	`數字`或`字串`		適用於 xs 及以上中斷點，格狀儲存格偏移的欄位數
`offset-lg`	`數字`或`字串`		適用於 lg 及以上中斷點，格狀儲存格偏移的欄位數
`offset-md`	`數字`或`字串`		適用於 md 及以上中斷點，格狀儲存格偏移的欄位數
`offset-sm`	`數字`或`字串`		適用於 sm 及以上中斷點，格狀儲存格偏移的欄位數
`offset-xl`	`數字`或`字串`		適用於 xl 及以上中斷點，格狀儲存格偏移的欄位數
`order`	`數字`或`字串`		適用於 xs 及以上中斷點，格狀儲存格的彈性順序
`order-lg`	`數字`或`字串`		適用於 lg 及以上中斷點，格狀儲存格的彈性順序
`order-md`	`數字`或`字串`		適用於 md 及以上中斷點，格狀儲存格的彈性順序
`order-sm`	`數字`或`字串`		適用於 sm 及以上中斷點，格狀儲存格的彈性順序
`order-xl`	`數字`或`字串`		適用於 xl 及以上中斷點，格狀儲存格的彈性順序
`sm`	`Boolean` 或 `Number` 或 `String`		適用於 sm 及以上中斷點的網格儲存格跨越的欄位數
`標籤`	`字串`	`'div'`	指定要呈現的 HTML 標籤，而不是預設標籤
`xl`	`Boolean` 或 `Number` 或 `String`		適用於 xl 及以上中斷點的網格儲存格跨越的欄位數

插槽

名稱	說明
`預設`	放置在列中的內容

`<b-form-row>`

功能性元件

檢視原始碼

<b-form-row> 的屬性
<b-form-row> 的插槽

屬性

所有屬性預設值都可以在全域設定。

屬性	類型	預設值	說明
`標籤`	`字串`	`'div'`	指定要呈現的 HTML 標籤，而不是預設標籤

插槽

名稱	說明
`預設`	放置在表單列中的內容

匯入個別元件

你可以透過以下具名稱的匯出，將個別元件匯入至你的專案

元件	具名稱的匯出	匯入路徑
`<b-container>`	`BContainer`	`bootstrap-vue`
`<b-row>`	`BRow`	`bootstrap-vue`
`<b-col>`	`BCol`	`bootstrap-vue`
`<b-form-row>`	`BFormRow`	`bootstrap-vue`

範例

import { BContainer } from 'bootstrap-vue'
Vue.component('b-container', BContainer)

以 Vue.js 外掛形式匯入

此外掛包含以上列出的所有個別元件. 外掛也會包含任何元件別名。

具名稱的匯出	匯入路徑
`LayoutPlugin`	`bootstrap-vue`

範例

import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)

它是如何運作的

容器 <b-container>

預設容器

流體寬度容器

有回應式流體容器

列 <b-row> 和 <b-form-row>

欄 <b-col>

網格選項

容器大小

自動配置欄位

等寬欄位

多行等寬

設定一個欄位的寬度

變動寬度的內容

響應式類別

所有斷點

由堆疊到橫向

混合搭配

對齊

垂直對齊

水平對齊

重新排序

整理欄

抵銷欄

欄上的 margin 實用程式

嵌套網格

列的欄

版面的效用程式

變更 display

Flexbox 選項

邊界和內距

切換 visibility

元件參考

屬性

插槽

屬性

插槽

屬性

插槽

屬性

插槽

匯入個別元件

以 Vue.js 外掛形式匯入

容器 `<b-container>`

列 `<b-row>` 和 `<b-form-row>`

欄 `<b-col>`

變更 `display`

切換 `visibility`