強力なモバイルファーストの flexbox グリッド（<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の定義済みグリッドクラスを使用して、小、中、大、および特大デバイスで3つの等幅列を作成しています。これらの列は、親の.containerを使用してページの中央に配置されます。
分解すると、仕組みは次のとおりです
<b-container>を使用し、すべてのビューポートおよびデバイスサイズでwidth: 100%の場合は<b-container fluid>を使用します。padding（ガターと呼ばれます）があります。このpaddingは、負のマージンを持つ行で打ち消されます。これにより、列のすべてのコンテンツが左側に視覚的に整列します。<b-col sm="auto">の4つのインスタンスは、それぞれ小のブレークポイントで自動的に25％幅になります。colsは、ブレークポイント（ブレークポイントxsから開始）に関係なく、行あたり可能な12列のうち使用する列数を示します。したがって、任意のブレークポイントで3つの等幅列が必要な場合は、<b-col cols="4">を使用できます。sm、md、lg、xlは、さまざまなブレークポイントで、行あたり可能な12列のうち使用する列数を示します。したがって、ブレークポイントsmで3つの等幅列が必要な場合は、<b-col sm="4">を使用できます。特殊な値autoは、行で残りの利用可能な列スペースを占めるために使用できます。widthはパーセンテージで設定されているため、常に流動的で、親要素に対して相対的にサイズが設定されます。paddingがありますが、<b-row>からmarginを、<b-col>からpaddingを、<b-row>のno-guttersプロパティを設定して削除できます。<b-col sm="4">は、小、中、大、および特大デバイスに適用されますが、最初のxsブレークポイントには適用されません）。flexboxに関する制限とバグ、たとえば一部のHTML要素をflexコンテナとして使用できないことに注意してください。
<b-container>コンテナ（<b-container>）は、Bootstrapで最も基本的なレイアウト要素です。デフォルトではレスポンシブな固定幅のコンテナ（つまり、各ブレークポイントでmax-widthが変化します）、または「fluid」プロパティを設定することにより流動幅（常に100％幅）のコンテナ、または特定のブレークポイントまでコンテナが流動的になるレスポンシブコンテナ（Bootstrap CSS v4.4+が必要）から選択します。
コンテナはネストできますが、ほとんどのレイアウトではネストされたコンテナは必要ありません。
デフォルトのブレークポイント幅は、Bootstrap V4.x SCSS変数を使用して構成できます。詳細については、テーマの参照ページ、および以下のグリッドオプションセクションの表を参照してください。
デフォルトの<b-container>は、レスポンシブな固定幅のコンテナです。つまり、各ビューポート幅のブレークポイントでmax-widthが変化します。
<b-container>
<!-- Content here -->
</b-container><b-container>でfluidプロパティを使用すると、ビューポートのブレークポイントに関係なく、常に100％幅のコンテナがレンダリングされます。
<b-container fluid>
<!-- Content here -->
</b-container>fluidプロパティをtrue（または空の文字列）に設定することは、Bootstrapの.container-fluidクラスと同等です。
Bootstrap v4.4+ CSSが必要です
レスポンシブコンテナは、Bootstrap v4.4で新しく追加されました。特定のブレークポイントに達するまで100％幅（流動的）で、その時点でmax-widthが適用されるコンテナを指定できます。たとえば、プロパティfluidを'md'に設定すると、'md'ブレークポイントに達するまで最初は100％幅で、その時点で標準の非流動コンテナになるコンテナがレンダリングされます。
<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プロパティをブレークポイント名に設定すると、Bootstrapクラス.container-{breakpoint}に変換されます。
デフォルトのコンテナ幅の値については、以下のグリッドオプションセクションの表を参照してください。
<b-row>と<b-form-row>行は列のラッパーです。各列には、列間のスペースを制御するための水平方向のパディング（ガターと呼ばれます）があります。このパディングは、負のマージンを持つ行で打ち消されます。これにより、列のすべてのコンテンツが左側に視覚的に整列します。
<b-row>からマージンを削除し、<b-col>からパディングを削除するには、<b-row>にno-guttersプロパティを設定します。
または、コンパクトなマージン（列間のガターが小さい）の場合は、フォームをレイアウトするときによく使用される<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 | |
|---|---|---|---|---|---|
| 最大コンテナー幅 | なし (auto) | 540px | 720px | 960px | 1140px |
| Prop | cols="*" | sm="*" | md="*" | lg="*" | xl="*" |
| 列数 | 12 | ||||
| ガター幅 | 30px (列の両側に15px) | ||||
| ネスト可能 | はい | ||||
| オフセット | offset="*" | offset-sm="*" | offset-md="*" | offset-lg="*" | offset-xl="*" |
| 順序 | order="*" | order-sm="*" | order-md="*" | order-lg="*" | order-xl="*" |
注釈
xs propはありません。cols propは、xs (最小) のブレークポイントを指します。次の表は、さまざまなブレークポイントでのデフォルトのコンテナー最大幅を示しています。カスタムテーマのBootstrap v4 SCSS/CSSを使用している場合は、これらが異なる場合があります。
| コンテナータイプ | エクストラスモール <576px | スモール ≥576px | ミディアム ≥768px | ラージ ≥992px | エクストララージ ≥1200px |
|---|---|---|---|---|---|
| デフォルト | 100% | 540px | 720px | 960px | 1140px |
fluid | 100% | 100% | 100% | 100% | 100% |
fluid="sm" | 100% | 540px | 720px | 960px | 1140px |
fluid="md" | 100% | 100% | 720px | 960px | 1140px |
fluid="lg" | 100% | 100% | 100% | 960px | 1140px |
fluid="xl" | 100% | 100% | 100% | 100% | 1140px |
追加情報については、上記のコンテナー<b-container>セクションセクションを参照してください
<b-col sm="6">のように明示的な数値のpropを使用せずに、ブレークポイント固有の列クラスを利用して列のサイズを簡単に設定できます。
たとえば、xsからxlまで、すべてのデバイスとビューポートに適用される2つのグリッドレイアウトを次に示します。必要なブレークポイントごとに単位なしのクラスを追加すると、すべての列が同じ幅になります。
<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を挿入して、複数行にまたがる等幅列を作成します。.w-100をいくつかのレスポンシブ表示ユーティリティと組み合わせて、分割をレスポンシブにします。
flex-basisまたはborderを明示的に指定しないと機能しないSafari flexboxバグがありました。古いブラウザーバージョン向けの回避策はありますが、ターゲットブラウザーがバグのあるバージョンに該当しない場合は、不要なはずです。
<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グリッド列の自動レイアウトは、1つの列の幅を設定し、兄弟列がその周りで自動的にサイズ変更されることも意味します。定義済みのグリッドクラス（以下に示す）、グリッドmixin、またはインライン幅を使用できます。中央の列の幅に関係なく、他の列はサイズ変更されることに注意してください。
<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" propを使用します。
<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のグリッドには、複雑なレスポンシブレイアウトを構築するための5つのレベルの定義済みクラスが含まれています。エクストラスモール、スモール、ミディアム、ラージ、またはエクストララージデバイスで、列のサイズを自由にカスタマイズしてください。
最小のデバイスから最大のデバイスまで同じグリッドの場合は、colとcols="*" propを使用します。特定のサイズの列が必要な場合は、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で等幅の場合はブール値）propを使用すると、デスクトップ（ミディアム）デバイスで水平になる前に、エクストラスモールデバイスでスタックされた状態で始まる基本的なグリッドシステムを作成できます。
<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 -->一部のグリッド層で列を単純にスタックさせたくないですか？必要に応じて、各層に異なるpropの組み合わせを使用してください。それがどのように機能するかをよりよく理解するには、以下の例を参照してください。
<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の配置ユーティリティを使用して、列を垂直方向および水平方向に配置します。
注: Internet Explorer 11は、以下に示すように、flexコンテナーにmin-heightがある場合、flexアイテムの垂直配置をサポートしていません。詳細については、Flexbugs #3を参照してください。
行内のすべてのグリッドセルの垂直配置には、<b-row>にalign-v 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-* propを使用します。これらのpropはレスポンシブであるため、ブレークポイントごとに順序を設定できます（例：order="1" order-md="2"）。5つのグリッド層すべてで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-* propまたはmarginユーティリティクラスの2つの方法でグリッド列をオフセットできます。グリッドのoffset-* propは列に合うようにサイズが設定されていますが、マージンユーティリティクラスは、オフセットの幅が可変であるクイックレイアウトに役立ちます。
<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 -->Bootstrap v4でのflexboxへの移行により、.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-* propを使用して、コンテンツとレイアウトを最適にレンダリングする列の数をすばやく設定します。通常の列幅が個々の<b-col>列に適用されるのに対し（例：<b-col md="4">）、行の列のcol-* propはショートカットとして親の<b-row>に設定されます。
これらの行の列を使用して、基本的なグリッドレイアウトをすばやく作成したり、カードレイアウトを制御したりします。Bootstrap v4.4のデフォルトの行の最大列数は6です（デフォルトの最大列数が12列である通常の列とは異なります）。
<b-row> propで指定された値は、1行あたりに作成する列の数です（一方、<b-col>のpropは占有する列の数を指します）。
<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ユーティリティを使用して、displayプロパティの一般的な値をレスポンシブに切り替えます。グリッドシステム、コンテンツ、またはコンポーネントと組み合わせて、特定のビューポートで表示または非表示にします。
Bootstrap 4はflexboxで構築されていますが、すべての要素のdisplayがdisplay: flexに変更されているわけではありません。これは多くの不要なオーバーライドを追加し、重要なブラウザの動作を予期せず変更してしまうためです。ほとんどのコンポーネントはflexboxを有効にして構築されています。
要素にdisplay: flexを追加する必要がある場合は、.d-flexまたはレスポンシブバリアント（例：.d-sm-flex）を使用してください。サイズ設定、配置、間隔設定など、追加のflexboxユーティリティを使用できるようにするには、このクラスまたはdisplay値が必要です。
marginとpaddingの間隔ユーティリティを使用して、要素とコンポーネントの間隔とサイズを制御します。Bootstrap 4には、デフォルトのSASS$spacer変数の1rem値を基準とした5段階の間隔ユーティリティスケールが含まれています。すべてのビューポートの値を選択するか（例：margin-right: 1remの場合は.mr-3）、特定のビューポートをターゲットにするレスポンシブバリアントを選択します（例：mdブレークポイントから開始するmargin-right: 1remの場合は.mr-md-3）。
visibilityの切り替えdisplayを切り替える必要がない場合は、可視性ユーティリティクラスを使用して、要素のvisibilityを切り替えることができます。非表示の要素はページのレイアウトに影響を与えますが、訪問者には視覚的に非表示になります。
<b-container>すべてのプロパティのデフォルト値は、グローバルに設定可能です。
プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|
fluid | Boolean または String | false | trueに設定すると、常に100％幅になります。または、ブレークポイントまでの100％幅にするBootstrapブレークポイント名のいずれかに設定します（ブレークポイント固有の値にはBootstrap v4.4+ CSSが必要です） |
tag | String | 'div' | デフォルトタグの代わりにレンダリングするHTMLタグを指定します |
名前 | 説明 |
|---|---|
デフォルト | コンテナに配置するコンテンツ |
<b-row>すべてのプロパティのデフォルト値は、グローバルに設定可能です。
プロパティ （クリックで昇順ソート） | 型 （クリックで昇順ソート） | デフォルト | 説明 |
|---|---|---|---|
align-content | String | null | クロス軸上の列のアイテムをまとめて整列させます：'start'、'center'、'end'、'around'、'between'、または'stretch'。単一のアイテム行には効果がありません |
align-h | String | null | すべての列の水平方向の配置/間隔：'start'、'center'、'end'、'around'、または'between' |
align-v | String | null | 行内のすべての列の垂直方向の配置：'start'、'center'、'end'、'baseline'、または'stretch' |
colsv2.2.0+ | Number または String | 'xs'ブレークポイントで作成する行の列数。Bootstrap v4.4 CSSが必要です | |
cols-lgv2.2.0+ | Number または String | 'lg'ブレークポイントで作成する行の列数。Bootstrap v4.4 CSSが必要です | |
cols-mdv2.2.0+ | Number または String | 'md'ブレークポイントで作成する行の列数。Bootstrap v4.4 CSSが必要です | |
cols-smv2.2.0+ | Number または String | 'sm'ブレークポイントで作成する行の列数。Bootstrap v4.4 CSSが必要です | |
cols-xlv2.2.0+ | Number または String | 'xl'ブレークポイントで作成する行の列数。Bootstrap v4.4 CSSが必要です | |
no-gutters | Boolean | false | 設定すると、行からマージンが削除され、子列からパディングが削除されます |
tag | String | 'div' | デフォルトタグの代わりにレンダリングするHTMLタグを指定します |
名前 | 説明 |
|---|---|
デフォルト | 行に配置するコンテンツ |
<b-col>すべてのプロパティのデフォルト値は、グローバルに設定可能です。
プロパティ （クリックで昇順ソート） | 型 （クリックで昇順ソート） | デフォルト | 説明 |
|---|---|---|---|
align-self | String | null | 行に対するグリッドセルの垂直方向の配置：'start'、'center'、'end'、'baseline'、または'stretch' |
col | Boolean | false | trueの場合、xs以上のブレークポイントに対して等幅の列グリッドセルが作成されます |
cols | Number または String | xs以上のブレークポイントでグリッドセルがスパンする列数 | |
lg | Boolean または Number または String | lg以上のブレークポイントでグリッドセルがスパンする列数 | |
md | Boolean または Number または String | md以上のブレークポイントでグリッドセルがスパンする列数 | |
offset | Number または String | xs以上のブレークポイントでグリッドセルがオフセットされる列数 | |
offset-lg | Number または String | lg以上のブレークポイントでグリッドセルがオフセットされる列数 | |
offset-md | Number または String | md以上のブレークポイントでグリッドセルがオフセットされる列数 | |
offset-sm | Number または String | sm以上のブレークポイントでグリッドセルがオフセットされる列数 | |
offset-xl | Number または String | xl以上のブレークポイントでグリッドセルがオフセットされる列数 | |
order | Number または String | xs以上のブレークポイントでのグリッドセルのフレックス順 | |
order-lg | Number または String | lg以上のブレークポイントでのグリッドセルのフレックス順 | |
order-md | Number または String | md以上のブレークポイントでのグリッドセルのフレックス順 | |
order-sm | Number または String | sm以上のブレークポイントでのグリッドセルのフレックス順 | |
order-xl | Number または String | xl以上のブレークポイントでのグリッドセルのフレックス順 | |
sm | Boolean または Number または String | sm以上のブレークポイントでグリッドセルがスパンする列数 | |
tag | String | 'div' | デフォルトタグの代わりにレンダリングするHTMLタグを指定します |
xl | Boolean または Number または String | xl以上のブレークポイントでグリッドセルがスパンする列数 |
名前 | 説明 |
|---|---|
デフォルト | 列に配置するコンテンツ |
<b-form-row>すべてのプロパティのデフォルト値は、グローバルに設定可能です。
プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|
tag | String | '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)このプラグインには、上記にリストされている個々のコンポーネントがすべて含まれていますプラグインには、コンポーネントエイリアスも含まれます。
名前付きエクスポート | インポートパス |
|---|---|
LayoutPlugin | bootstrap-vue |
例
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)