ブートストラップ4グリッド

ブートストラップ4グリッドシステム

Bootstrapのグリッドシステムはflexboxで構築されており、ページ全体で最大12列を使用できます。

12列すべてを個別に使用したくない場合は、列をグループ化して、より幅の広い列を作成できます。

グリッドシステムはレスポンシブであり、画面サイズに応じて列が自動的に再配置されます。

合計が12以下になるようにしてください（使用可能な12列すべてを使用する必要はありません）。

グリッドクラス

Bootstrap4グリッドシステムには5つのクラスがあります。

• .col-（超小型デバイス-画面幅が576px未満）
• .col-sm-（小型デバイス-576px以上の画面幅）
• .col-md-（中型デバイス-画面幅が768px以上）
• .col-lg-（大型デバイス-992px以上の画面幅）
• .col-xl-（xlargeデバイス-画面幅が1200px以上）

上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。

ヒント：sm各クラスはスケールアップするため、とに同じ幅を設定する場合は md、を指定するだけで済みますsm。

ブートストラップ4グリッドの基本構造

以下は、Bootstrap4グリッドの基本構造です。

最初の例：行を作成します（<div class="row">）。.col-*-*次に、必要な数の列（適切なクラスのタグ）を追加します 。最初の星（*）は応答性（sm、md、lg、またはxl）を表し、2番目の星は数値を表します。各行の合計は12になります。

2番目の例：それぞれに数値を追加する代わりに、colブートストラップにレイアウトを処理させて、等しい幅の列を作成します。2つの"col"要素=各列の幅が50％です。3列=各列の幅は33.33％。4列= 25％幅など.col-sm|md|lg|xl。列をレスポンシブにするために使用することもできます。

以下に、基本的なBootstrap4グリッドレイアウトの例をいくつか集めました。

3つの等しい列

次の例は、すべてのデバイスと画面幅で3つの等しい幅の列を作成する方法を示しています。

レスポンシブカラム

次の例は、タブレットから始めて特大のデスクトップにスケーリングする4つの等しい幅の列を作成する方法を示しています。幅が576px未満の携帯電話や画面では、列は自動的に重なり合います。

2つの等しくないレスポンシブ列

次の例は、タブレットから始めて、大きな追加のデスクトップにスケーリングする2つのさまざまな幅の列を取得する方法を示しています。