https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
の
ーーーー
＜悪霊class="container」>
＜悪霊class="rowは整列します-アイテム-スタート」>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
悪霊>
ーーーー
を使いたいためメモる
以下全文和訳
主な内容にスキップしてください
ホーム
ドキュメンテーション
例
テーマ
仕事
EXPO
ブログ
v4.0
Search...
初めに
レイアウト
概要
格子
メディア物
レイアウトのためのユーティリティ
内容
構成要素
ユーティリティ
広がってください
移動
概要
それは、どのように働きますか
格子オプション
自動車レイアウト・コラム
等しい幅
1段幅をセットすること
可変的な幅内容
等しい幅マルチ列
敏感なクラス
すべてのブレークポイント
水平位置に積み重なります
混合物と試合
調整
垂直調整
横調整
側溝でない
コラム・ラッピング
コラムは壊れます
追加注文すること
順序クラス
コラムを相殺すること
ネスティング
生意気mixins
変数
Mixins
例使用
格子をカスタマイズすること
コラムと側溝
格子段
格子システム
12段システム、5つのデフォルトのに反応する段、サス変数とmixinsのおかげのすべての形とサイズの配置とあらかじめ定義されたクラスの多数を造るために、我々の強力なモバイル最初のflexboxネットワークを使ってください。
The Brother QL-1100 label printers makes app integration easy.
ads via Carbon
それは、どのように働きますか
つまみ革の格子システムはレイアウトに一連の容器、列とコラムを使います、そして、内容を一列に並べてください。それはflexboxで造られて、完全に敏感です。下記は、例と格子が一緒に来る方法の徹底的な観察です。
flexboxにとって新しいかよく知らない？背景、用語、ガイドラインとコード断片のためにこのCSS Tricks flexboxガイドを読んでください。
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
Copy
＜悪霊class="container」>
＜悪霊class="row」>
<悪霊class="col-sm」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col-sm」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col-sm」>
3つのコラムのうちの1つ
悪霊>
悪霊>悪霊>
我々のあらかじめ定義された格子クラスを使用している小型で、中程度で、大きくて、特別に大きな装置で、上記の例は、3つの等しい幅コラムを作成します。それらのコラムは、親.containerでページに集中しています。
それを壊して、それが働く方法は、ここにあります：
容器は、中心にあって、水平にあなたのサイトの内容にパッドを入れる手段を提供します。幅のために敏感なピクセル幅または.container-流体のために.containerを使ってください：すべてのビューポートと装置サイズの中の100%。
列は、コラムのための包装紙です。彼らの間でスペースをコントロールするために、各々のコラムは、横パッド（側溝と呼ばれる）を持っています。それから、このパッドは、ネガティブ・マージンで列で打ち消されます。この方法ですと、あなたのコラムのすべての内容は、左側の下に視覚的に整列します。
格子レイアウトに、内容は列の中に置かれなければなりません、そして、コラムだけは列の近い子供たちである場合があります。
flexboxに感謝します。そして、指定された幅意志のない格子コラムが等しい幅コラムとしてのレイアウトで自動的にあります。たとえば、.col-smの4つの例各々は、自動的に小さなブレークポイントから、そして、上へ幅25%です。より多くの例については自動車レイアウト・コラムのセクションを見てください。
あなたが列につき可能性がある12から使いたいと思うコラムの数を、コラム・クラスは示します。それで、横切って3つの等しい幅コラムを望むならば、あなたは.col-4を使うことができます。
コラム幅はパーセンテージでセットされるので、彼らは常に流れるようで、親元素と比較して大きさを設定されます。
コラムは個々のコラムの間で貧民街をつくるために横パッドを持っています、しかし、あなたは.rowの上で.no-側溝でコラムから列とパッドからマージンを取り除くことができます。
格子を敏感にするために、5つの格子ブレークポイント（敏感なブレークポイントごとの1）が、あります：すべてのブレークポイント（特別に小さい）、小さくて、中間で、大きくて、特別に大きい。
格子ブレークポイントは最小限の幅メディア問合わせに基づきます。そして、それ（例えば、.col-sm-4は小型で、中程度で、大きくて、特別に大きな装置（最初のxsブレークポイント以外のでない）にあてはまります）より上に、彼らがその唯一のブレークポイントと人々全てに申し込むことを意味します。
あなたは、より意味論的なマークアップのためにあらかじめ定義された格子クラス（.col-4のような）またはサスmixinsを使うことができます。
flexbox（屈曲容器として若干のHTML要素を使用することができないことのような）のまわりで、限界とバグに気づいていてください。
格子オプション
Bootstrapが大部分のサイズを定めるためにエムまたはレムを使う間、pxsが格子ブレークポイントと容器幅のために使われます。これは、ビューポート幅がピクセルにあって、フォントサイズで変わらないからです。
Bootstrap格子システムの面がどのように便利なテーブルで複数の装置全体で働くかについて見てください。
特別に小さい
＜576px 小さい
≥576px 媒体
≥768px 大きい
≥992px 特別に大きい
≥1200px
最大容器幅 何（自動車）もない 540px 720px 960px 1140px
クラス接頭辞 .col- .col-sm- .col-md- .col-lg- .col-xl-
コラムの 12
側溝幅 30px（コラムの両側の上の15px）
Nestableな はい
コラム注文 はい
自動車レイアウト・コラム
.col-sm-6のような露骨な数えられたクラスなしで、ブレークポイントに特有のコラム・クラスを簡単なコラム・サイジングのために利用してください。
等しい幅
たとえば、xsからxlまで、あらゆる装置とビューポートにあてはまる2つの格子レイアウトは、ここにあります。あなたが必要とするブレークポイントごとに多くの単位のないクラスを加えてください、そして、あらゆるコラムは同じ幅です。
2のうちの1つ
2のうちの2つ
3のうちの1つ
3のうちの2つ
3のうちの3つ
Copy
＜悪霊class="container」>
＜悪霊class="row」>
＜悪霊class="col」>
2つの＜/悪霊のうちの1つ>
＜悪霊class="col」>
2つの＜/悪霊のうちの2つ>
＜/悪霊>
＜悪霊class="row」>
＜悪霊class="col」>
3つの＜/悪霊のうちの1つ>
＜悪霊class="col」>
3つの＜/悪霊のうちの2つ>
＜悪霊class="col」>
3つの＜/悪霊のうちの3つ>
＜/悪霊>
悪霊>
等しい幅コラムは複数の線に分けられることができます、しかし、これが露骨な屈曲-の基礎または境界なしで働くのを防いだSafari flexboxの虫がありました。回避方法が以前のブラウザー版のためにあります、しかし、あなたが最新であるならば、彼らは必要でしてはいけません。
コラム
コラム
コラム
コラム
Copy
＜悪霊class="container」>
＜悪霊class="row」>
<悪霊class="col」>Column＜/悪霊>
<悪霊class="col」>Column＜/悪霊>
＜悪霊class="w-100>＜/悪霊>
<悪霊class="col」>Column＜/悪霊>
<悪霊class="col」>Column＜/悪霊>
＜/悪霊>
悪霊>
1段幅をセットすること
あなたには1つのコラムの幅をセットすることができて、コラムがそれのまわりで自動的に大きさを変更する兄弟がいることができることを、flexbox格子コラムのための自動車レイアウトも、意味します。あなたは、あらかじめ定義された格子クラス（以下に示すように）、格子mixinsまたはインライン幅を使うかもしれません。他のコラムが問題の大きさを変更しないことを注意します中心のコラムの幅。
3のうちの1つ
3（より広い）のうちの2つ
3のうちの3つ
3のうちの1つ
3（より広い）のうちの2つ
3のうちの3つ
Copy
＜悪霊class="container」>
＜悪霊class="row」>
＜悪霊class="col」>
3つの＜/悪霊のうちの1つ>
＜悪霊class="col-6>
3つの（より広い）＜/悪霊のうちの2つ>
＜悪霊class="col」>
3つの＜/悪霊のうちの3つ>
＜/悪霊>
＜悪霊class="row」>
＜悪霊class="col」>
3つの＜/悪霊のうちの1つ>
＜悪霊class="col-5>
3つの（より広い）＜/悪霊のうちの2つ>
＜悪霊class="col」>
3つの＜/悪霊のうちの3つ>
＜/悪霊>
悪霊>
可変的な幅内容
彼らの内容の自然幅に基づくサイズ・コラムに、結腸-｛ブレークポイント｝-自動車クラスを使用してください。
3のうちの1つ
可変的な幅内容
3のうちの3つ
3のうちの1つ
可変的な幅内容
3のうちの3つ
Copy
＜悪霊class="container」>
＜悪霊class="rowは、正当化します-内容-md-センター」>
＜悪霊class="col col-lg-2>
3つの＜/悪霊のうちの1つ>
<悪霊class="col-md-自動車」>
可変的な幅内容
悪霊>
＜悪霊class="col col-lg-2>
3のうちの3つ
悪霊>
悪霊>
<悪霊class="row」>
<悪霊class="col」>
3のうちの1つ
悪霊>
<悪霊class="col-md-自動車」>
可変的な幅内容悪霊>
＜悪霊class="col col-lg-2>
3のうちの3つ
悪霊>
悪霊>悪霊>
等しい幅マルチ列
あなたがコラムが新しい線に壊れることを望む.w-100を挿入することによって、複数の列にわたる等しい幅コラムを作成してください。ブレークを.w-100と若干の敏感な表示ユーティリティを混ぜ合わせることによって敏感にしてください。
鞍部
鞍部
鞍部
鞍部
Copy
＜悪霊class="row」>
<悪霊class="col」>鞍部＜/悪霊>
<悪霊class="col」>鞍部＜/悪霊>
＜悪霊class="w-100>＜/悪霊>
<悪霊class="col」>鞍部＜/悪霊>
<悪霊class="col」>鞍部＜/悪霊>
悪霊>
敏感なクラス
つまみ革の格子は、複雑な敏感なレイアウトを造るために、あらかじめ定義されたクラスの5つの段を含みます。特別に小型であるか、小型であるか、中程度であるか、大きいか、特別に大きな装置で、どんなにあなたが適当と考えても、あなたのコラムのサイズをカスタマイズしてください。
すべてのブレークポイント
装置で最も小さなものから最も大きなものへの同じことである格子のために、.colと.col-*クラスを使用してください。あなたが特に大きさを設定されたコラムを必要とするとき、数えられたクラスを指定してください;さもなければ、.colを支持するのを遠慮しなくしてください。
鞍部
鞍部
鞍部
鞍部
鞍部-8
鞍部-4
Copy
＜悪霊class="row」>
<悪霊class="col」>鞍部＜/悪霊>
<悪霊class="col」>鞍部＜/悪霊>
<悪霊class="col」>鞍部＜/悪霊>
<悪霊class="col」>鞍部＜/悪霊>
＜/悪霊>
＜悪霊class="row」>
＜悪霊class="col-8>鞍部-8＜/悪霊>
＜悪霊class="col-4>鞍部-4＜/悪霊>
悪霊>
水平位置に積み重なります
.col-sm-*クラスの一つのセットを使って、あなたは、小さなブレークポイント(sm)でで水平になる前に積み重なって、始める基本的な格子システムを作成することができます。
結腸sm-8
結腸sm-4
結腸sm
結腸sm
結腸sm
Copy
＜悪霊class="row」>
<悪霊class="col-sm-8>結腸-sm-8＜/悪霊>
<悪霊class="col-sm-4>結腸-sm-4＜/悪霊>
＜/悪霊>
＜悪霊class="row」>
<悪霊class="col-sm」>結腸-sm＜/悪霊>
<悪霊class="col-sm」>結腸-sm＜/悪霊>
<悪霊class="col-sm」>結腸-sm＜/悪霊>
悪霊>
混合物と試合
単に若干の格子段で積み重ねるあなたのコラムが欲しくありません？必要に応じて各々の段のために異なるクラスの組合せを使ってください。それがどのようにすべて働くかというより良い考えのために、下記の例を見てください。
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Copy
＜！－1つのフルワイドと残り半分-幅になることによって、携帯でコラムを積み重ねてください -->
＜悪霊class="row」>
＜悪霊class="col-12 col-md-8>.col-12 .col-md-8＜/悪霊>
＜悪霊class="col-6 col-md-4>.col-6 .col-md-4＜/悪霊>
悪霊>＜！－コラムは携帯の幅50%で始まって、デスクトップの上の幅最高33.3%をぶつけます -->
＜悪霊class="row」>
＜悪霊class="col-6 col-md-4>.col-6 .col-md-4＜/悪霊>
＜悪霊class="col-6 col-md-4>.col-6 .col-md-4＜/悪霊>
＜悪霊class="col-6 col-md-4>.col-6 .col-md-4＜/悪霊>
悪霊>＜！－携帯とデスクトップで、コラムは常に50%広いです -->
＜悪霊class="row」>
＜悪霊class="col-6>.col-6＜/悪霊>
＜悪霊class="col-6>.col-6＜/悪霊>
悪霊>
調整
使用flexbox調整ユーティリティは、コラムを垂直に、そして、水平に一列に並べます。
垂直調整
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
Copy
＜悪霊class="container」>
＜悪霊class="rowは整列します-アイテム-スタート」>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
悪霊>
＜悪霊class="rowは整列します-アイテム-センター」>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
悪霊>
＜悪霊class="rowは整列します-アイテム-終わり」>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="col」>
3つのコラムのうちの1つ
悪霊>
悪霊>悪霊>
3つのコラムのうちの1つ
3つのコラムのうちの1つ
3つのコラムのうちの1つ
Copy
＜悪霊class="container」>
＜悪霊class="row」>
<悪霊class="colは整列します-自己-スタート」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="colは整列します-自己-センター」>
3つのコラムのうちの1つ
悪霊>
<悪霊class="colは整列します-個人的な目的」>
3つのコラムのうちの1つ
悪霊>
悪霊>悪霊>
横調整
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
2つのコラムのうちの1つ
Copy
＜悪霊class="container」>
＜悪霊class="rowは、正当化します-内容-スタート」>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
悪霊>
＜悪霊class="rowは、正当化します-内容-センター」>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
悪霊>
＜悪霊class="rowは、正当化します-内容-終わり」>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
悪霊>
＜悪霊class="rowは、正当化します-content-around」>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
悪霊>
＜悪霊class="rowは、正当化します-内容間に」>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
<悪霊class="col-4>
2つのコラムのうちの1つ
悪霊>
悪霊>悪霊>
側溝でない
我々のあらかじめ定義された格子クラスのコラムの間の貧民街は、.no-側溝で取り除かれることができます。これは、すべての即座の子供たちコラムから.rowと横パッドからネガティブ・マージンを取り除きます。
これらのスタイルを作成するためのソースコードは、ここにあります。コラム無効化が最初の子供たちコラムだけに捜し出されて、特質セレクターによって目標とされることに注意すべきです。これがより特定のセレクターを生み出す間、コラム・パッドはまだ間隔ユーティリティでさらにカスタマイズされることができます。
端への端は、設計しなければなりませんか？親.containerまたは.container-流体を落としてください。
Copy
.no-側溝｛マージン-右：0;
マージン-左：0;
.col、
［class*="col］｛パッド-右：0;
パッド左：0;
｝｝
実際には、それが見る方法は、ここにあります。あなたが他の全てのあらかじめ定義された格子クラス（コラム幅、敏感な段、追加注文とより多くを含む）でこれを使い続けることができる点に注意してください。
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
Copy
＜悪霊class="rowノー側溝」>
＜悪霊class="col-12結腸sm-6 col-md-8>.col-12 .col-sm-6 .col-md-8＜/悪霊>
＜悪霊class="col-6 col-md-4>.col-6 .col-md-4＜/悪霊>
悪霊>
コラム・ラッピング
12以上のコラムが一つの列の中に置かれるならば、余分のコラムの各々のグループは、1つの単位として、新しい線の上へ巻きつきます。
.col-9
.col-4
9 + 4 = 13から > 12、臆病者が1つの隣接する単位として新しい線の上へ包んでもらうこの幅4段。
.col-6
以降のコラムは、新しい線に沿って進みます。
Copy
＜悪霊class="row」>
＜悪霊class="col-9>.col-9＜/悪霊>
＜悪霊class="col-4＞.col-4
9 + 4 = 13 > 12、この4-コラムに広がる悪霊は、1つの隣接する単位として新しい線の上へ包まれます。＜/悪霊>
.col-6
Subsequentコラムは、新しい線に沿って進みます<悪霊class="col-6>。＜/悪霊>
悪霊>
コラムは壊れます
flexboxで新しい線にコラムを壊すことは、小さなハックを必要とします：要素を幅と加えてください：どこであなたが新しい線にコラムを包みたくても、100%。通常、これは複数の.rowsで達成されます、しかし、すべての実施方法がこれを占めることができるというわけではありません。
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Copy
＜悪霊class="row」>
＜悪霊class="col-6 col-sm-3>.col-6 .col-sm-3＜/悪霊>
＜悪霊class="col-6 col-sm-3>.col-6 .col-sm-3悪霊>
＜！－次のコラムに新しい線に壊れることを強いてください -->
<悪霊class="w-100>悪霊>
＜悪霊class="col-6 col-sm-3>.col-6 .col-sm-3＜/悪霊>
＜悪霊class="col-6 col-sm-3>.col-6 .col-sm-3＜/悪霊>
悪霊>
あなたは、我々の敏感な表示ユーティリティで特定のブレークポイントでこのブレークを適用もするかもしれません。
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Copy
＜悪霊class="row」>
＜悪霊class="col-6 col-sm-4>.col-6 .col-sm-4＜/悪霊>
＜悪霊class="col-6 col-sm-4>.col-6 .col-sm-4悪霊>
＜！－次のコラムにmdブレークポイントの新しい線に、そして、上へ壊れることを強いてください -->
<悪霊class="w-100 d-何d-md-ブロックでない」>悪霊>
＜悪霊class="col-6 col-sm-4>.col-6 .col-sm-4＜/悪霊>
＜悪霊class="col-6 col-sm-4>.col-6 .col-sm-4＜/悪霊>
悪霊>
追加注文すること
順序クラス
あなたの満足の視覚の順序をコントロールするために、.order-クラスを使用してください。これらのクラスは敏感であるので、あなたはブレークポイント（例えば、.order-1.order-md-2）によって命令をセットすることができます。全5つの格子段全体で12を通して1に対する支持を含みます。
最初であるが、無秩序の
第2、しかし、最後
第3、しかし、最初
Copy
＜悪霊class="container」>
＜悪霊class="row」>
<悪霊class="col」>
最初であるが、無秩序の
悪霊>
<悪霊class="col順序-12">
第2、しかし、最後
悪霊>
<悪霊class="col順序-1">
第3、しかし、最初
悪霊>
悪霊>悪霊>
順序を適用することによって要素の順序を変える敏感な.order初で.order最後のクラスも、あります：-1と順序：13（順序：$columns + 1）、それぞれ。これらのクラスは、必要に応じて数えられた.order-*クラスで混在することもできます。
第1、しかし、最後
二番目であるが、無秩序の
第3、しかし、最初
Copy
＜悪霊class="container」>
＜悪霊class="row」>
<悪霊class="col順序-最後」>
第1、しかし、最後
悪霊>
<悪霊class="col」>
二番目であるが、無秩序の
悪霊>
<順序最初の悪霊class="col」>
第3、しかし、最初
悪霊>
悪霊>悪霊>
コラムを相殺すること
あなたは、2つの方向で格子コラムを相殺することができます：我々の敏感な.offset-格子クラスと我々のマージン・ユーティリティ。オフセットの幅が様々である速いレイアウトにマージンがより役立つ間、格子クラスはコラムにマッチするために大きさを設定されます。
相殺されたクラス
コラムを.offset-md-*クラスを使用している右へ移動してください。これらのクラスは、*コラムによって列の左のはずれを増やします。たとえば、.offset-md-4は4つのコラムの上に.col-md-4を動かします。
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
Copy
＜悪霊class="row」>
<悪霊class="col-md-4>.col-md-4＜/悪霊>
＜悪霊class="col-md-4 offset-md-4>.col-md-4 .offset-md-4＜/悪霊>
＜/悪霊>
＜悪霊class="row」>
＜悪霊class="col-md-3 offset-md-3>.col-md-3 .offset-md-3＜/悪霊>
＜悪霊class="col-md-3 offset-md-3>.col-md-3 .offset-md-3＜/悪霊>
＜/悪霊>
＜悪霊class="row」>
＜悪霊class="col-md-6 offset-md-3>.col-md-6 .offset-md-3＜/悪霊>
悪霊>
敏感なブレークポイントのコラム空き地に加えて、あなたはオフセットをリセットする必要があるかもしれません。格子例で活動中にこれを見てください。
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Copy
＜悪霊class="row」>
＜悪霊class="col-sm-5 col-md-6>.col-sm-5 .col-md-6＜/悪霊>
＜悪霊class="col-sm-5オフセットのsm-2結腸md-6 offset-md-0>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0＜/悪霊>
悪霊><悪霊class="row」>
＜悪霊class="col-sm-6結腸md-5 col-lg-6>.col-sm-6 .col-md-5 .col-lg-6＜/悪霊>
＜悪霊class="col-sm-6結腸md-5オフセットのmd-2結腸lg-6 offset-lg-0>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0＜/悪霊>
悪霊>
マージン・ユーティリティ
v4のflexboxへの移動で、あなたは、お互いから離れて兄弟のコラムを押しつけるために、.mr-自動車のようなマージン公共事業を利用することができます。
.col-md-4
.col-md-4 .ml-自動車
.col-md-3 .ml-md-自動車
.col-md-3 .ml-md-自動車
.col自動.mr-自動車
.col-自動車
Copy
＜悪霊class="row」>
<悪霊class="col-md-4>.col-md-4＜/悪霊>
＜ml自動車悪霊class="col-md-4」>.col-md-4 .ml-自動＜/悪霊>
＜/悪霊>
＜悪霊class="row」>
＜ml-md自動車悪霊class="col-md-3」>.col-md-3 .ml-md-自動＜/悪霊>
＜ml-md自動車悪霊class="col-md-3」>.col-md-3 .ml-md-自動＜/悪霊>
＜/悪霊>
＜悪霊class="row」>
.col-自動.mr-自動＜/悪霊>
<悪霊class="col-自動車」>.col-自動＜/悪霊>
悪霊>
ネスティング
巣にデフォルト格子によるあなたの内容が既存の.col-sm-*列の中に新しい.rowと.col-sm-*コラムのセットを加えること。最高12または少数の人（あなたが全12の利用できるコラムを使う必要はありません）を、加える一組のコラムを、入れ子になった列は含まなければなりません。
レベル1：.col-sm-9
レベル2：.col-8 .col-sm-6
レベル2：.col-4 .col-sm-6
Copy
＜悪霊class="row」>
<悪霊class="col-sm-9>
レベル1：.col-sm-9＜悪霊class="row」>
<悪霊class="col-8 col-sm-6>
レベル2：.col-8 .col-sm-6＜/悪霊>
<悪霊class="col-4 col-sm-6>
レベル2：.col-4 .col-sm-6＜/悪霊>
＜/悪霊>
＜/悪霊>
悪霊>
生意気mixins
Bootstrapのソース・サス・ファイルを使用するとき、あなたにはカスタムで、意味論的で、敏感なページ・レイアウトをつくるためにサス変数とmixinsを使う選択権があります。すぐに使えるクラスの全部のセットを速い敏感なレイアウトに提供するために、我々のあらかじめ定義された格子クラスは、これらの同じ変数とmixinsを使います。
変数
変数と地図は、コラム、側溝幅とコラムを浮かせ始めるメディア問合わせ点の数を測定します。下記のカスタムmixinsより上に、ならびにそれのために文書化されるあらかじめ定義された格子クラスを生み出すために、我々はこれらを使います。
Copy
$grid-コラム： 12;$grid-側溝-幅：30px;$grid-ブレークポイント：（
//Extraテレビ/電話
xs：0、//Smallスクリーン/電話sm：576px∥//Mediumスクリーン/タブレットmd：768px∥//Largeスクリーン/デスクトップlg：992px∥//Extra大きなスクリーン/広い所デスクトップxl：1200px）;$container-最大-幅：（
sm：540px、md：720px、lg：960px、xl：1140px）;
Mixins
個々の格子コラムのために意味論的なCSSを生み出すために、Mixinsが格子変数とともに使われます。
Copy
//Creates一連のコラム@include製造-列（）のための包装紙;//要素格子がすぐに使える@include（幅以外のすべてを適用する）が製造-鞍部準備する（）Make;@include製造-鞍部（$size、$columns：$grid-コラム）;//ソート順@include製造-結腸-オフセットを相殺するか、変えることによって、Getは思います（$size、$columns：$grid-コラム）;
例使用
あなたはあなた自身のカスタムメイドの値まで変数を修正することができるか、ちょうど彼らのデフォルト値でmixinsを使うことができます。隙間で2段レイアウトをつくるデフォルト・セッティングを使うことの例は、ここにあります。
Copy
.example-容器｛幅：800px;
@include製造-容器（）;｝.example-列｛
@include製造-列（）;｝.example-内容主な｛
製造-結腸手早い（）@include;
メディア-ブレークポイント上に向かう（sm）@include｛@include製造-鞍部(6);
｝
メディア-ブレークポイント上に向かう（lg）@include｛@include製造-鞍部(8);
｝｝.example-内容第二です｛
製造-結腸手早い（）@include;
メディア-ブレークポイント上に向かう（sm）@include｛@include製造-鞍部(6);
｝
メディア-ブレークポイント上に向かう（lg）@include｛@include製造-鞍部(4);
｝｝
主な内容
第二の内容
Copy
＜悪霊class="example-容器」>
＜悪霊class="example-列」>
Main内容＜/悪霊>
Secondary内容＜/悪霊>
＜/悪霊>
悪霊>
格子をカスタマイズすること
我々のビルトイン格子サス変数と地図を使って、完全にあらかじめ定義された格子クラスをカスタマイズすることが、できます。段の数、メディア問合わせ局面とそれから、widths―が再コンパイルする容器を変えてください。
コラムと側溝
格子コラムの数は、サス変数を通して修正されることができます。$grid-側溝-幅がコラム貧民街のためにパッド左とパッドの権利全体で均一に分けられるブレークポイントに特有の幅を許す間、$grid-コラムは個々のコラムの幅（パーセントで）を生み出すのに用いられます。
Copy
$grid-コラム：12！デフォルト;$grid-側溝-幅：30px！デフォルト;
格子段
コラム自体を越えて動いて、あなたは格子段の数をカスタマイズもするかもしれません。ちょうど4つの格子段を望むならば、あなたはこのように何かに$grid-ブレークポイントと$container-最大-幅を更新するでしょう：
Copy
$grid-ブレークポイント：（
xs：0、sm：480px、md：768px、lg：1024px）;$container-最大-幅：（
sm：420px、md：720px、lg：960px）;
サス変数または地図にどんな変化でももたらすとき、あなたは変化を収拾する必要があります、そして、再コンパイルしてください。そうすることは、コラム幅、オフセットと注文のためにあらかじめ定義された格子クラスの真新しいセットを出力します。敏感な可視性ユーティリティも、カスタムメイドのブレークポイントを使うために、アップデートされます。必ず格子価格をpx（レムでない、エムでないまたは%でない）でセットするようにするようにしてください。