ブートストラップグリッドの例

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

3つの等しい列

.col-sm-4

次の例は、タブレットから始めて大きなデスクトップにスケーリングする3つの等しい幅の列を取得する方法を示しています。携帯電話では、列は自動的にスタックされます。

例

3つの等しくない列

.col-sm-3

.col-sm-6

.col-sm-3

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

例

2つの等しくない列

.col-sm-4

.col-sm-8

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

例

側溝なし

.col-sm-4

.col-sm-8

クラスを使用して.row-no-gutters、行とその列からガターを削除します。

例

2つのネストされた列を持つ2つの列

次の例は、タブレットから始めて大きなデスクトップにスケーリングする2つの列を取得し、大きな列内に別の2つの列（同じ幅）を配置する方法を示しています（携帯電話では、これらの列とそのネストされた列はスタックします）。

例

混合：モバイルとデスクトップ

Bootstrapグリッドシステムには、xs（電話）、sm（タブレット）、md（デスクトップ）、およびlg（より大きなデスクトップ）の4つのクラスがあります。クラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。

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

例

ヒント：グリッド列は1行に最大12個追加する必要があることに注意してください。それ以上に、ビューポートに関係なく列はスタックされます。

混合：モバイル、タブレット、デスクトップ

例

クリアフロート

.clearfix不均一なコンテンツでの奇妙なラッピングを防ぐために、特定のブレークポイントで（クラスを使用して）floatをクリアします。

例

<div class="row">
<div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>

<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>

オフセット列

.col-md-offset-*クラスを使用して列を右に移動します。これらのクラスは、列の左マージンを*列増やします。

例

プッシュアンドプル-列の順序を変更

.col-md-push-*および .col-md-pull-*クラスを使用してグリッド列の順序を変更します。

例

❮ 前次 ❯

ブートストラップ3チュートリアル