10

Twitterのブートストラップを使用して、最後の「列」が折り返される理由を理解しようとしています。

<div class="row span4 solidBottom">
        <div class="span1">
            <label>A</label>
        </div>
        <div class="span1">
            <label>B</label>
        </div>
        <div class="span1">
            <label>C</label>
        </div>
        <div class="span1">
            <label>D</label>
        </div>
</div>

結果は次のようになります。

 A   B   C 
 D
___________

SPAN 4 = 300px
Four Span1s = 240
3 Paddings = 60
240 + 60 = 300

それで、なぜそれがラップするのかについての手がかりはありますか？

複数列のフォームを作成しようとしていますが、列と行を整理しておく必要があります。

ありがとうございました。

編集：style="width:auto"行に追加すると問題は解決しますが、300pxのデフォルトの幅が折り返されるのはなぜですか？

4

1 に答える 1

9

span4 が 300px であることは正しいですが、HTML にエラーがあると思います。

ネストされた列を新しい .row クラスでラップする必要があります。これを行うと、ラッピングが停止します。デフォルトの (非流動的な) Bootstrap グリッドの使用例については、 http://jsfiddle.net/panchroma/UBTv4/を参照してください。

これは私が使用したHTMLです：

<div class="container">

<div class="row">
    <div class="span4 solidBottom">

        <div class="row">
            <div class="span1">
                <label>A</label>
            </div>

            <div class="span1">
                <label>B</label>
            </div>

            <div class="span1">
                <label>C</label>
            </div>

            <div class="span1">
                <label>D</label>
            </div>

        </div> <!-- end nested row -->

        <div class="span8"> </div>

  </div> <!-- end parent row -->
</div> <!-- end container -->

固定グリッドの場合、ネストされた行の列数は、親列の列数 (つまり、この場合は 4) まで追加する必要があります。

流動グリッド (行流動) を使用している場合、ネストされた行の列数は合計で 12 になるはずです。

于 2012-12-27T04:45:54.527 に答える