1.実装の原則
グリッドシステムの実装原理は非常に単純です。コンテナのサイズを定義し、それを12の部分に分割し（24または32の部分もありますが、12の部分が最も一般的です）、内側と外側のマージンを調整します。 、そして最後にメディアクエリを組み合わせます。強力なレスポンシブグリッドシステムを作成しました。Bootstrapフレームワークのグリッドシステムは、コンテナを12の等しい部分に分割します。
<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>2.動作原理
データ行（.row）は.container、適切な配置とパディング（padding）を行うために、コンテナー（）に含まれている必要があります。行（.row）を列（）に追加できます。列.columnの数は、列の総数を超えてはならず、12のように二等分されます。特定のコンテンツは列コンテナー（.column）に配置する必要があり、列（.column）のみを行コンテナー（.row）の直接の子要素として使用できます。内側の余白（padding）を設定して、列間の間隔を作成します。次に、最初と最後の列に負の外側距離（margin）を設定してpadding、内側距離（）の影響を相殺します。
写真を簡単に説明してください：大きな白い領域を持つ最も外側の境界線は、ブラウザの表示領域に相当します。ブートストラップ・フレームワークのグリッドシステムにおける応答効果がある。これは、ブラウザの4種類（超小型画面、小画面、中画面と大画面）。ブレークポイント（画素の分割点）であるを有し768px、992pxそして1220px。2番目の境界線（1）は、コンテナー（.container）と同等です。同じ幅ではない別のブラウザ解像度、用：オート、750px、970pxと1170px。横棒No.2.rowは、コンテナの行（）が12個の等しい部分、つまり列に均等に分割されていることを示しています。各列には、1つpadding-left: 15px（padding-right: 15px写真のピンクの部分）と1つ（写真の紫色の部分）があります。これも最初の列につながりpadding-left、最後の列がpadding-right全幅を占めるため30px、見苦しいページが発生します。もちろん、特定の距離を残す必要がある場合は、この方法が適しています。3号ローバー容器（ある.row）、を定義margin-leftおよびmargin-rightれる-15px最後の列から左右内側から1列目に対抗するために使用されます。行と列を組み合わせて、水平バー4の効果を確認します。これは私たちが期待する効果で.containerあり、最初と最後の列とコンテナ（）の間にスペースはありません。バー5は、列と列を好きなように組み合わせることができることを示したいだけですが、それらの組み合わせの合計が列の総数を超えてはなりません。
公式の説明：「column（.columnset）」paddingプロパティを使用して、列と列の間にスペースを作成します（、gutter）。要素のセットをオフセットするために.row負の要素marginを設定することにより、間接的に「行（）」に含まれる「列（）」がキャンセルされます。.containerpadding.row.columnpadding
3.基本的な使用法
グリッドシステムは、実際には列の組み合わせであるレイアウトに使用されます。Bootstrapフレームワークのグリッドシステムには、4つの基本的な使用法があります。
単純な理解の列の組み合わせは、colspanプロパティの形式にいくらか似ている、列をマージするために数値を変更することです（原則：列の合計は12を超えることはできません）。
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</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-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div>列の組み合わせを実現する方法は非常に簡単で、フロートと幅のパーセンテージという2つのCSS機能のみが含まれます。
4.列オフセット
場合によっては、2つの隣接する列を近づけたくないがmargin、その他の技術的手段を使用したくないことがあります。このとき、列オフセット（offset）関数を使用して実現できます。列オフセットの使用も非常に簡単です。列要素にクラス名を追加するだけでcol-md-offset-*（アスタリスクはオフセットする列の組み合わせの数を表します）、このクラス名の列は右にシフトされます。たとえば、column要素に追加col-md-offset-4すると、列が4列の幅だけ右に移動することを意味します。実現原理は非常に単純です。つまり、12分の1（1/12）が使用されmargin-leftます。次に、ある数offsetだけありますmargin-left。ただし、col-md-offset-*列と行のオフセットの総数が12を超えないように、列を右にシフトするときに使用する詳細に注意する必要があります。そうしないと、列の区切り線が発生します。
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>グリッドを作成してみてください。
1）4列のグリッド。
2）最初の列のグリッドは、オフセットなしで幅2グリッドを占めます。
3）2列目と3列目のグリッドは幅2グリッドを占め、1グリッドオフセットされています。
4）グリッドの4番目の列は、幅3グリッドを占め、1グリッドオフセットされています。
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
<div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
<div class="col-md-3 col-md-offset-1">col-md-3 col-md-offset-1</div>
</div>5.列の並べ替え
列の並べ替えは、実際には列の方向を変更すること、つまり、左右のフローティングを変更し、フローティング距離を設定することです。グリッドシステムのフレームにクラス名を追加することにより、ブートストラップcol-md-push-*とcol-md-pull-*（アスタリスクで表されるモバイル列の組み合わせ）。
6、列のネスト
Bootstrapフレームワークのグリッドシステムは、列のネストもサポートしています。1つ以上の行（.row）コンテナーを列に追加してから、この行コンテナーに列を挿入できます（上記の列を使用します）。ただし、列コンテナの行コンテナ（.row）では、幅が100％の場合、現在の外側の列の幅になります。ネストされた列の総数も、12列以下である必要があります。それ以外の場合は、最後の列が新しい行に表示されます。
付録
元のテキストを読む：https://blog.mazey.net/1959.html