ブートストラップフレームワークのグリッドシステムは、コンテナを12個に分割します。それを使用すると、実際の状況に応じてレス/SASSソースコードを再コンパイルして値12を変更できます。メッシュシステムはブートストラップフレームワークでどのように機能しますか。
1。適切なアライメントとパディングを与えることができるように、コンテナにデータの行（.ROW）を含める必要があります
<div> <div> </div> </div>
2。列（.column）を行（.row）に追加できますが、列の合計は二等分の列の総数を超えることはできません（以下など）
<div> <div> <div> </div> <div> </div> </div>
3.特定のコンテンツは列容器（.column）に配置する必要があり、列（.column）のみを行コンテナ（.row）の直接子要素として使用できます。
4.内側の距離（パディング）を設定して列間の間隔を作成し、最初の列と最後のスタックの負の値を設定してパディングの影響を相殺します。
Bootstrapグリッドシステムには、4種類のブラウザ（超小画面、小さな画面、中画面、大画面）があり、ブレークポイントは768px、992px、1220pxです。
コンテナ（.container）は、異なるブラウザ解像度のために、幅が異なります。自動、760px、970px、1170px。
.container {padding-right：15px; padding-left：15px; margin-right：auto; reft-left：auto; @media（min-width：768px）{.container {.container {.750px;}@media（min-width：992px）{width：width：fidth：width：width：width： 1200px）{.container {width：1170px;}行コンテナ（.row）は、コンテナの行を12の等しい部分、つまり列に分割します。各列にはパディング左があり、15px、パディング右：15px。また、これにより、最初の列にパディング左が、最後の列のパディング右は中程度の幅の30pxを占有します。
.col-xs-1, .col-md-1, .col-lg-1, .col-xs-2, .col-md-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-md-3, .col-md-3, .col-lg-3, .col-xs-4, .col-md-4, .col-md-4、.col-lg-4、.col-xs-5、.col-md-5、.col-md-5、.col-lg-5、.col-xs-6、.col-md-6、.col-lg-6、.col-md-6、.col-lg-6、.col-xs-7、.col-md-7、.col-md-7、.col-md-lg-6、 .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-md-9, .col-lg-9, .col-xs-10, .col-md-10, .col-md-10, .col-md-10, .col-lg-10, .col-xs-11、.col-md-11、.col-md-11、.col-md-11、.col-lg-11、.col-xs-12、.col-md-12、.col-md-12、.col-lg-12 {position：position：relative; min-height：1px; padding-right：15px; padding-light：15px;行コンテナ（.row）は、最初の列の左内側距離と最後の列の右内距離をオフセットするために使用される-15pxのマージン左とマージン右値を定義します。
.row {マージン右：-15px;マージン左：-15px;}基本的な使用法
Bootstrapフレームワークは、さまざまな画面サイズに異なるグリッドスタイルを使用しているため、例としてミッドスクリーン（970px）を使用してみましょう。
1。カラムの組み合わせ
列の組み合わせは、列をマージするために数を変更することです（列の総数は12を超えることはできません）。これは、テーブルのcolspan属性に多少似ています。列の組み合わせ方式には、幅が浮かぶという2つの特性のみが含まれます。
<div> <div> div> col-md-4 </div> <div> col-md-8 </div> </div> <div> <div> div> <div> col-MD-4 </div> <div> col-MD-4 </div> <di V> col-MD-4 </div> </div> <div> div> div> div> </div> <div> <div> div> div> div> col-MD-6 </div> <div> col-MD-3 </div> </div>
効果は次のとおりです。
すべての列が左に浮かんでいることを確認してください
.col-md-1、.col-md-2、.col-md-3、.col-md-4、.col-md-5、.col-md-6、.col-md-7、.col-md-8、.col-md-9、.col-md-10、.col-md-1、.col-md-2 {float：left;}各列の組み合わせの幅を定義します
.col-md-12 {width：100％;}。col-md-11 {width：91.66666667％;}。 66.666666667％;} {width：25％;}。col-md-2 {width：16.6666666667％;}。col-md-1 {width：8.33333333％;}列のオフセット
隣接する2つの列を互いに近づけたくない場合がありますが、マージンやその他の技術的手段を使用したくない場合があります。これは、列オフセットを使用して実現できます。列のオフセットを使用して、列要素にクラス名を追加します。col-md-offset-*（アスタリスクはオフセットする列の組み合わせの数を表します）。このクラス名のある列は、列要素に.col-md-offset-4を追加するなど、オフセットされます。
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> <div> <div> <div> <div </div> <div> col-md-2 </div> </div> </div> </div>
効果は次のとおりです。
実装の原則：
オフセットがあるのと同じくらい多くのマージン左側の左翼左を使用すると、左右のマージン左を得ることができます。
.COL-MD-Offset-12 {マージン左：100％;}。col-MD-Offset-11 {マージン左：91.666666667％;}。 66.666666667％;}。 33.333333333％;}。列を正しくオフセットするためにcol-MD-offset-*を使用する場合、列とオフセット列の総数が12を超えないようにする必要があることに注意してください。
列の並べ替え
列のソートは、列の方向を変更し、浮動距離を設定することです。ブートストラップグリッドシステムでは、クラス名を追加することです。 col-md-push-*およびcol-md-pull-*
<div> <div> div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
効果は次のとおりです。
COL-MD-4は左側にあり、COL-MD-8は右側にあります。位置を交換する場合は、Col-MD-4を8列ごとに右に移動する必要があります。つまり、クラスname.col-md-push-8を追加する必要があります。同時に、Col-MD-8を4列で左に移動する必要があります。つまり、クラス名を追加する必要があります。col-md-pull-4。
Bootstrapは、左右に設定することによってのみポジショニング効果を実現します。
.col-md-pull-12 {右：100％;}。col-md-pull-11 {右：91.66666667％;}。col-md-pull-10 {右：83.3333333333％;}。 66.666666667％;}。 33.333333333％;}。 100％;}。col-md-push-11 {左：91.6666666667％;}。col-md-push-10 {左：83.333333333％;}。 58.333333333％;}。col-md-push-6 {左：50％;} 16.6666666667％;}。col-md-push-1 {左：8.33333333％;}。col-md-push-0 {左：0;}ネスティング
列のネスティングは、列に1つを追加したり、列に行コンテナを作成してから、この行コンテナに列を挿入できます。列容器内の行コンテナ（行）の幅が100％の場合、現在の外部列の幅です。
<div> <div> <div>
内部にグリッドをネストしました
<div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> div> div> <div> <div> <div> div> div> div> div> div> col-md-4 </div> div>
内部にグリッドをネストしました
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
上記のコンテンツは、編集者が紹介したブートストラップグリッドシステムです。私はそれが誰にでも役立つことを願っています！