BootStrapのグリッドシステム(レイアウト)を深く理解する

1、グリッドシステム(レイアウト)
Bootstrapには、応答型、モバイルデバイス優先のストリーミンググリッドシステムが内蔵されており、スクリーンデバイスまたはビューポートサイズが増加するにつれて、システムは自動的に最大12列に分けられます.
ここではBootstrapのグリッドシステムをレイアウトと呼びます.一連の行(row)と列(column)の組み合わせでページレイアウトを作成し、作成したレイアウトにコンテンツを入れることができます.Bootstrapグリッドシステムの動作原理を簡単に説明します.
グリッドシステムの実現原理は非常に簡単で、容器の大きさを定義することによって12部(24部または32部に分けられることもあるが、12部が最も一般的である)に分け、内外の余白を調整し、最後にメディアクエリーと結びつけて、強力な応答式グリッドシステムを作成した.Bootstrapフレームワークのグリッドシステムは、コンテナを12部に分割します.
使用するときは、実際の状況に応じてLESS(またはSass)ソースコードを再コンパイルして12という数値を修正することができます(つまり24または32に変更して、もちろんもっと分けることもできますが、このような使用はお勧めしません).
2、使用規則
Bootstrapには、応答型、モバイルデバイスが内蔵されています.

1.データ行(.row)は容器(.container)に含まれ、適切な位置合わせと内距離(padding)を付与しなければならない.次のようになります.

<div class="container">
	<div class="row"></div>
</div>

2、行(.row)には列(.column)を追加できますが、列数の和は、12のような平分の総列数を超えてはいけません.次のようになります.

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

3、具体的な内容は列容器(column)の中に置くべきで、しかも列(column)だけが行容器(.row)の直接のサブ要素とすることができる.
4.内部ピッチを設定することで、列と列の間隔を作成します.次に、最初の列と最後の列に負の値の外距離を設定することによって、内距離の影響を相殺する
Bootstrapフレームワークのグリッドシステムの動作原理をよりよく理解するために、スケッチを見てみましょう.
図について簡単に説明します.
1、一番外側の枠線は、大きな白い領域を持っていて、ブラウザに相当する可視領域です.Bootstrapフレームワークのグリッドシステムでは、768 px、992 px、1220 pxのブレークポイント(ピクセルの境界点)を持つ4種類のブラウザ(超小画面、小画面、中画面、大画面)を持つ応答効果があります.
2、2番目の枠線(1)は容器(.container)に相当します.ブラウザ解像度によって幅が異なります.自動、750 px、970 px、1170 pxです.bootstrapでcssの736行目～756行目に設定:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
  @media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

3、2番横棒は、容器の行(.row)を12等分した、つまり列を述べています.各列には、「padding-left:15 px」(図中のピンク部分)と「padding-right:15 px」(図中の紫部分)があります.これにより、最初の列のpadding-leftと最後の列のpadding-rightが総幅の30 pxを占め、ページが美しくなくなります.もちろん、一定の間隔を残す必要がある場合は、この方法がいいです.例えばbootstrap.cssの767行目~772行目に示す:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

4、3番の横棒は行コンテナ(.row)で、「margin-left」と「margin-right」の値が「-15 px」であることを定義し、最初の列の左内距離と最後の列の右内距離を相殺します.bootstrapでcssの763行目~767行目に見える:

.row {
  margin-right: -15px;
  margin-left: -15px;

5、行と列を合わせると横棒4の効果が見られます.つまり、最初の列と最後の列とコンテナ(.container)との間に間隔がない効果を期待します.
横棒5はただみんなに見せたいだけで、必要に応じて、任意に列と列を組み合わせて、ただ彼らの組み合わせの数の和は総列数を超えないでください.