Example
グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトし、整列させます。
flexbox で構築されており、完全にレスポンシブです。
以下に、グリッドシステムがどのように組み合わされているかの例と詳細な説明を示します。
tip
flexbox を初めてご利用になる方は Read this CSS Tricks flexbox guide をご参照ください。
<template>
<Container>
<Row>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
上の例では、定義済みのグリッドクラスを使用して、すべてのデバイスとビューポートに等幅のカラムを3つ作成しています。
これらのカラムは親の Container を中心にしてページの中央に配置されます。
Grid options
グリッドシステムは、6つのデフォルトのブレークポイントと、カスタマイズしたブレークポイントのすべてに適応できます。
6つのデフォルトのグリッド階層は以下の通りです。
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
上で述べたように、これらのブレークポイントはそれぞれ独自のコンテナ、固有のクラスプレフィックス、および修飾子を持っています。
以下に、ブレークポイント間でグリッドがどのように変化するかを示します。
| xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px | |
|---|---|---|---|---|---|---|
Container max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Col attribute | | col="sm" | col="md" | col="lg" | col="xl" | col="xxl" |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| NeTable | Yes | |||||
| Column ordering | Yes | |||||
Auto-layout columns
sm="6" のような明示的な番号付き属性を使用せずに、ブレークポイント固有のカラム属性を利用して簡単にカラムのサイズを決定します。
Equal-width
例えば、xs から xxl までのすべてのデバイスとビューポートに適用される 2 つのグリッドレイアウトを以下に示します。
必要なブレークポイントごとに任意の数のユニットレスプロパティを追加すると、すべての列が同じ幅になります。
<template>
<Container>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
<Col>3 of 3</Col>
</Row>
</Container>
</template>
Setting one column width
flexbox グリッド カラムの自動レイアウトは、1 つのカラムの幅を設定して、その周りにある兄弟カラムのサイズを自動的に変更することもできます。
定義済みのグリッド属性 (以下に示すように)、グリッド ミックスイン、インライン幅を使用できます。中央のカラムの幅に関係なく、他のカラムのサイズが変更されることに注意してください。
<template>
<Container>
<Row>
<Col>1 of 3</Col>
<Col col="6">
2 of 3 (wider)
</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col col="5">
2 of 3 (wider)
</Col>
<Col>3 of 3</Col>
</Row>
</Container>
</template>
Variable width content
size="auto" 属性もしくは{breakpoint}="auto"属性を使って、内容の自然な幅に基づいてカラムのサイズを調整します。
<template>
<Container>
<Row justify-content="md-center">
<Col col="lg-2">
1 of 3
</Col>
<Col col="md-auto">
2 of 3 (wider)
</Col>
<Col col="lg-2">
3 of 3
</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col col="md-auto">
2 of 3 (wider)
</Col>
<Col>3 of 3</Col>
</Row>
</Container>
</template>
Responsive classes
Bootstrapのグリッドには、複雑なレスポンシブレイアウトを構築するための事前定義された属性の6つの層が含まれています。
extra small, small, medium, large, or extra large(特大、小、中、大、または特大) のデバイスで、適切と思われる方法で列のサイズをカスタマイズします。
All breakpoints
最小のデバイスから最大のデバイスまで同じグリッドの場合、Col コンポーネントや、 size="" 属性を使います。
特定のサイズの列が必要な場合は、番号付きの属性を指定します; それ以外の場合は col を使用してください。
<template>
<Container>
<Row>
<Col>1 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>col-sm</Col>
<Col>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
</Container>
</template>
Stacked to horizontal
<Col sm="">コンポーネントの単一のセットを使用して、積み重ねられて始まり、小さなブレークポイント（sm）で水平になる基本的なグリッドシステムを作成できます。
<template>
<Container>
<Row>
<Col>1 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>col-sm</Col>
<Col>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
</Container>
</template>
Mix and match
必要に応じて、層ごとに異なる属性の組み合わせを使用します。
どのように機能するかについては、以下の例をご覧ください。
<template>
<Container>
<Row>
<Col col="md-8">
.col-md-8
</Col>
<Col col="6 md-4">
.col-6 .col-md-4
</Col>
</Row>
<Row>
<Col col="6 md-4">
.col-6 .col-md-4
</Col>
<Col col="6 md-4">
.col-6 .col-md-4
</Col>
<Col col="6 md-4">
.col-6 .col-md-4
</Col>
</Row>
<Row>
<Col col="6">
.col-6
</Col>
<Col col="6">
.col-6
</Col>
</Row>
</Container>
</template>
Row columns
レスポンシブな <Col columns="">コンポーネントを使用して、コンテンツとレイアウトを最適にレンダリングする列の数をすばやく設定します。
通常の Colコンポーネントは個々の列（たとえば、<Col :md="4">）に適用されますが、行列クラスはショートカットとして親の Rowに設定されます。
<Row columns="auto">で列に自然な幅を与えることができます。
これらの行列クラスを使用して、基本的なグリッドレイアウトをすばやく作成したり、カードレイアウトを制御したりします。
<template>
<Container>
<Row columns="2">
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row columns="3">
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row auto>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row columns="4">
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row columns="4">
<Col>Column</Col>
<Col>Column</Col>
<Col col="6">
Column
</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
<template>
<Container>
<Row columns="1 sm-2 md-4">
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
<Col>Column</Col>
</Row>
</Container>
</template>
Nesting
コンテンツをデフォルトのグリッドにネストするには、新しい <Row>と一連の <Col sm="">列を既存の <Col sm="">列内に追加します。
ネストされた行には、最大で12以下の一連の列が含まれている必要があります（使用可能な12の列すべてを使用する必要はありません）。