Bootstrap のグリッドレイアウトの理解

この投稿では、さまざまな例を使用して、BootstrapGridシステムのさまざまな側面について説明します。まず、Bootstrap Gridシステムの中型デバイス用に4つの等しい列レイアウトを作成しましょう。

Dhananjay Kumar Last Updated Feb 25, 2025 11min read

日を追うごとに、新しい画面サイズの新しいデバイスが登場しており、Web開発者として、これらのさまざまな画面サイズに対応するWebアプリケーションを作成する必要があります。レスポンシブレイアウトを作成する方法は複数ありますが、Bootstrapグリッドレイアウトが最も簡単だと思います。

4 均等列レイアウト

レイアウトを作成するには、次の手順を完了する必要があります。

固定幅の container クラスまたは screen の全幅の container-fluid クラスを持つ div を作成します
クラスrowを持つdivを作成します。クラス行を持つ Div はコンテナ内になければなりません
4 つの列に対して 4 つの div を作成します。列の div は、行 div の直接の子である必要があります
コンテンツは div 列内にあります

行に4つの等しい列を作成するために、以下のリストに示すように、クラスがcol-md-3に設定された4つのdivを作成しました。

<div class="row">
    <div class="col-md-3">
        <button class="btn btn-success">column1</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-info">column2</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-danger">column3</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-warning">column4</button>
    </div>
</div>

ブートストラップグリッドシステムは、画面の使用可能な幅を12列に分割します。したがって、4つの列を作成するために、col-md-3クラス(中型デバイス用)を使用しました。

3 Unequal Columns Layout

行に3つの等しくない列を作成するために、以下のリストに示すように、クラスがcol-md-3、col-md-6、およびcol-md-4に設定された3つのdivを作成しました。

<div class="row">
    <div class="col-md-3">
        <h2>some text</h2>
    </div>
    <div class="col-md-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4">
        <h2>some text</h2>
    </div>
</div>

クラス .col-md-* を使用してレイアウトを作成し、1 つは列が等しく、もう 1 つは中程度のデバイス用に列が等しくありません。他のデバイスについては、投稿の後半で説明する他のクラスが利用可能です。グリッドシステムの理論的概念についてさらに議論しましょう。

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

Bootstrap 3.0 Gridシステムは、モバイルを念頭に置いて設計されました。レスポンシブで、超小型デバイス、小型デバイス、デスクトップ、および超大型デスクトップのレイアウトを作成するためのクラスを提供します。さまざまな種類のデバイス用に提供されるさまざまなクラスを次の画像に示します。

ブートストラップグリッドシステムは、各タイプの画面を12列に分割します。列の幅は画面サイズによって異なりますが、Bootstrap ではさまざまな画面サイズが考慮され、その列サイズは次のとおりです。

列の幅は画面サイズによって異なりますが、Bootstrap ではさまざまな画面サイズとその列サイズが考慮されます

これらの 12 列は、次に示すように、画面サイズに応じてさまざまなバリエーションで拡大または縮小できます。

これらの 12 列は、画面サイズに応じてさまざまなバリエーションで拡大または縮小できます

以下のリストを使用して、中型デバイス用の上記のレイアウトを作成できます。

<div class="container">
    <div class="row">
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>

    </div>

    <div class="row">
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            col-md-4
        </div>
        <div class="col-md-4">
            col-md-4
        </div>
        <div class="col-md-4">
            col-md-4
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            col-md-6
        </div>
        <div class="col-md-6">
            col-md-6
        </div>
    </div>
</div>

ブートストラップグリッドシステムを使用するルール

Bootstrap Gridレイアウトを使用するには、次の点に注意する必要があります。

行は、適切なパディングと配置を取得するために、container (固定幅の場合)またはcontainer.fluid (全幅の場合)内に配置する必要があります。
列は、行の直接の子である必要があります。
コンテンツは列の内側に配置する必要があります。
各行には 2 つの使用可能な列があります。
1 行に 12 を超える列が配置されている場合、追加の列の各グループは 1 つの単位として新しい行に折り返されます。

中規模デバイス用のレイアウトの作成

次の要件を持つ中型デバイスのレイアウトを作成する必要があるとします

Should have three columns
1 列目の幅は 2 列の幅と等しくなければなりません。
2 列目の幅は 6 列の幅と等しくなければなりません。
3 列目の幅は 4 列の幅と等しくなければなりません。

このレイアウトは、次のリストに示すように作成できます。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

これにより、次に示すようにレイアウトが作成されます。

デバイスの全幅で作業せず、固定幅を使用する場合は、以下のリストに示すように、行divをコンテナクラス内に配置します。

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

ここでは、固定幅を使用して、次の画像に示すようにレイアウトが作成されます。

1つの行に12列を超える列を配置すると、ユニットとしての追加の列は次の行に積み重ねられます。

小型デバイスのレイアウトの作成

次の要件を持つ小型デバイスのレイアウトを作成する必要があるとします。

Should have three columns
1 列目の幅は 2 列の幅と等しくなければなりません。
2 番目の幅は、6^列の幅と等しくなければなりません。
3 番目の幅は、4 列の幅と等しくなければなりません。

このレイアウトは、次のリストに示すように、小型デバイス用に作成できます。

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <h2>.col-sm-2</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-6">
            <h2>.col-sm-6</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-4">
            <h2>.col-sm-4</h2>
            <p>some text </p>
        </div>
    </div>
</div>

このスニペットは、下の画像に示すレイアウトを提供します。お気づきかもしれませんが、2 番目の列の幅は 1 番目の列の幅の 3 倍です。また、もう一つ重要な点は、ブラウザの幅が狭くなっているとき(小さなデバイスをシミュレートしているとき)でも、列が縦に積み重なっていないことです。

同様に、大型デバイスと超小型デバイスのレイアウトは、それぞれ .col-mg-* クラスと .col-xs.* クラスを使用して作成できます。

タブレットとデスクトップのレイアウトの作成

col-md-* クラスと col-sm-* クラスを組み合わせて、デスクトップとタブレットのレイアウトを作成できます。以下のリストに示すように、3 つの等しくない列のレイアウトを作成できます。

<div class="row">
    <div class="col-md-2 col-sm-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4">
        <h2>some text</h2>
    </div>
</div>

上記で作成されたレイアウトは、中画面サイズのデスクトップとタブレットの両方に応答します。

タブレット、デスクトップ、モバイル用のレイアウトの作成

col-md-* クラス、col-xs-*、および col-sm-* クラスを組み合わせて、デスクトップとタブレットのレイアウトを作成できます – 以下のリストに示すように、3 つの等しくない列のレイアウトを作成する方法を見てみましょう。

<div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <h2>some text</h2>
    </div>
</div>

上記で作成されたレイアウトは、中画面サイズのデスクトップ、モバイルデバイス、タブレットの両方に対応できます。

Nesting Columns

Bootstrap では列のネストも可能なため、既存の列内に行と列を配置できます。ネストの場合でも、同じ行の合計列の合計が 12 を超えないように注意してください。これをよりよく理解するために、次のシナリオを考えてみましょう。

行があります。
行には 2 つの列があります。
最初の列は col-md-4 クラスです。
2 番目の列は col-md-8 クラスです。
最初の列の内側にネストされた列があります。

ここで、ネストされた列の最大数は、col-md-4内の12になります。12 列を超える列は、最初の列の次の行に積み重ねられます。 12個以上のネストされた列を保持している以下のリストについて考えてみましょう。

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-2">
                <h2>text here</h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <h1>I am level - col-md-8 </h1>
    </div>
</div>

ここでは、メイン行の最初の列に12を超えるネストされた列を配置しました。追加のネストされた列は、次の図に示すように次の行に積み重ねられます。

Column Offset

Bootstrap では、クラス .col-md-offset-* を使用して列を右に移動できます。したがって、列を右に4列移動したいとすると、クラスcol-md-offset-4を使用する必要があります。これは、次のリストに示すように実行できます。

<div class="row">
    <div class="col-md-5 col-md-offset-4">
        <h2>moved 4 columns right</h2>
    </div>
    <div class="col-md-3">
        <h2>col-md-3 </h2>
    </div>
</div>

オフセット列は、次の図に示すように表示されます。

コラムのプッシュ&プル

Bootstrapでは、列の並べ替えもできます。これを行うには、col-md-push-*またはcol-md-pull-*クラスを使用できます。

<div class="row">
    <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
 </div>

ここでは、次に示すように、最初の列は右に 3 列押し下げられ、2 列目は左に 9 列押しられます。

結論

これまで説明してきたように、Bootstrapが提供するさまざまなクラスを使用して、Webアプリケーションのレスポンシブレイアウトを作成できます。この投稿では、行と列のクラス、および列のオフセット、プッシュ、プル、ネストに焦点を当てました。この投稿がお役に立てば幸いです、そして読んでくれてありがとう!

お気に入りのフレームワークを使用して、あらゆるシナリオに対応する最新の Web アプリケーションを作成します。今すぐIgnite UIをダウンロードして、Infragistics jQuery コントロールのパワーを体験してください。

操作方法

Bootstrap のグリッド レイアウトの理解