4

2つのdivを持つコンテナがあります：span9とspan3。私のspan9div内では、9列のみに制限されると予想されます。ただし、内のdivをに設定しない限り、span93つのspan12余分な空白列が残ります。

一体なぜこれが起こるのでしょうか？私にとって、「span9」は、9つの列が使用可能であることを意味するはずです。使用しているコンテンツがグリッド内の12列にリセットされる原因となるものはまったくありません。意味がありません。

4

3 に答える 3

7

列クラスを混在させて一致させることができるため、これは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-6divの幅は1170pxの50％になります（簡単にするために、行の-15pxのサイドマージンは無視します）。その行に列がいくつあるかは関係ありません。コンテナ内に収まるよりも多くの列がある場合、列は自動的に折り返されます。一部の列が非常に高い場合は、またはクラスを<div class="clearfix"></div>組み合わせて使用​​して、行の高さが一定になるようにします。visible-*hidden-*

参照：Boostrap3グリッドシステム

于 2014-01-25T11:05:31.780 に答える
5

@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 -->
于 2013-01-02T23:24:55.083 に答える
1

分数で考える必要がありますspan1。1列を意味するのではなく、1 /12列を意味し、12/12列を意味しspan12ます。Span12必要に応じて12回細分化できる包含要素内の単一の列を意味します。

したがって、2つの列が必要な場合は、。を使用して2つのdivを配置し<div class="span6">ます。

于 2013-01-02T21:52:38.897 に答える