2つのdivを持つコンテナがあります:span9
とspan3
。私のspan9
div内では、9列のみに制限されると予想されます。ただし、内のdivをに設定しない限り、span9
3つのspan12
余分な空白列が残ります。
一体なぜこれが起こるのでしょうか?私にとって、「span9」は、9つの列が使用可能であることを意味するはずです。使用しているコンテンツがグリッド内の12列にリセットされる原因となるものはまったくありません。意味がありません。
2つのdivを持つコンテナがあります:span9
とspan3
。私のspan9
div内では、9列のみに制限されると予想されます。ただし、内のdivをに設定しない限り、span9
3つのspan12
余分な空白列が残ります。
一体なぜこれが起こるのでしょうか?私にとって、「span9」は、9つの列が使用可能であることを意味するはずです。使用しているコンテンツがグリッド内の12列にリセットされる原因となるものはまったくありません。意味がありません。
列クラスを混在させて一致させることができるため、これはBootstrap 3には適用されないことに注意してください。したがって、クラス名の数を合計して12にする必要はありません。たとえば、「混合:モバイルとデスクトップ」のコードは次のとおりです。 "サンプルグリッドページの例:
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8">...</div>
<div class="col-xs-6 col-lg-4">...</div>
</div>
ご覧のとおり、列を12に加算しようとする概念は、Bootstrap 3では意味がありません。bootstrap.cssの内部を見ると、列クラスがコンテナーdivに対する単純なパーセンテージであることがわかります。 、例:
.col-sm-6 {
width: 50%;
}
この場合、コンテナの幅が1170pxの場合、各col-sm-6
divの幅は1170pxの50%になります(簡単にするために、行の-15pxのサイドマージンは無視します)。その行に列がいくつあるかは関係ありません。コンテナ内に収まるよりも多くの列がある場合、列は自動的に折り返されます。一部の列が非常に高い場合は、またはクラスを<div class="clearfix"></div>
組み合わせて使用して、行の高さが一定になるようにします。visible-*
hidden-*
@firtiveからのコメントに加えて、ネストされた列のコードは、デフォルトのレスポンシブ(非流体)グリッドと流体グリッドで異なります。
デフォルトのグリッドでは、class = "row"を使用します。この場合、ネストされた列の数は、実際には合計9(親の列の数)になります。これは、列の幅が固定されているためです。
流体グリッドでは、class = "row-fluid"を使用すると、ネストされた列の数は合計で12になります。これは、列の幅が親の幅のパーセンテージに基づいて変化するためです。
以下の例を参照してください。
お役に立てれば
デフォルトの非流体の例 は、このライブを参照してください
<div class="row">
<div class="span9">
<div class="row"> <!-- start nested row -->
<div class="span6">nested col</div>
<div class="span3">nested col</div>
</div> <!-- end nested row -->
</div> <!-- end span 9 parent -->
<div class="span3">
span 3
</div>
</div> <!-- end row -->
流体グリッドの例 は、このライブを参照してください
<div class="row-fluid">
<div class="span9">
<div class="row-fluid"> <!-- start nested fluid row -->
<div class="span6">nested col</div>
<div class="span6">nested col</div>
</div> <!-- end nested fluid row -->
</div> <!-- end span 9 parent -->
<div class="span3">span 3</div>
</div> <!-- end row -->
分数で考える必要がありますspan1
。1列を意味するのではなく、1 /12列を意味し、12/12列を意味しspan12
ます。Span12
必要に応じて12回細分化できる包含要素内の単一の列を意味します。
したがって、2つの列が必要な場合は、。を使用して2つのdivを配置し<div class="span6">
ます。