Bootstrap 5 グリッド：並べ替えから水平に
- 前のページ BS5 グリッドシステム
- 次のページ BS5 グリッド XSmall
グリッド例：水平に並べる
基本的なグリッドシステムを作成しましょう。このシステムは、超小型デバイスで並べ替えられ、大きなデバイスでは水平に並べられます。
以下の例では、シンプルな「水平に並べる」の二列レイアウトが示されています。これは、すべてのスクリーンで50/50の分割が生じ、超小型スクリーンでは自動的に並べ替えられます（100%）:
例：水平に並べる
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>列 1 ...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>列 2 ...</p>
</div>
</div>
</div>
ヒント：.col-sm-* クラス内の数字は、div がいくつかの列を越えるべきかを示します（合計 12 列）。したがって、}}.col-sm-1 1 列を越える、.col-sm-4 4 列を越える、.col-sm-6 6 列を越える、といった具合です。
注意：合計が 12 に等しくないかそれ以下であることを確認してください（すべての 12 つの利用可能な列を使用する必要はありません）：
ヒント：を使用して .container-fluid クラスを .container、どのコンテンツも full-width レイアウトを fixed-width のリスポンシブレイアウト：
例：リスポンシブコンテナ
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>列 1 ...</p>
</div>
<div class="col-sm-6">
<p>列 2 ...</p>
</div>
</div>
</div>
自動レイアウト列
Bootstrap 5 では、すべてのデバイスに対して等幅の列を作成する簡単な方法があります：ただし、 .col-size-* 数字を中から削除し、col 要素上でのみ使用 .col-size クラス。Bootstrap は列の数を識別し、各列は同じ幅を得ます。サイズクラス（sm、md など）が列がどのタイミングで応答するかを決定します：
<!-- 2列：すべてのスクリーン上の 50% 幅、超小型デバイス（100% 幅）以外 --> <div class="row"> <div class="col-sm">2 件中 1</div> <div class="col-sm">2 件中 2</div> </div> <!-- 4列：すべてのスクリーン上の 25% 幅、超小型デバイス（100% 幅）以外 --> <div class="row"> <div class="col-sm">4 件中 1</div> <div class="col-sm">4 件中 2</div> <div class="col-sm">4 件中 3</div> <div class="col-sm">4 件中 4</div> </div>
- 前のページ BS5 グリッドシステム
- 次のページ BS5 グリッド XSmall
