6

TwitterのBootstrapをベースにしたプレミアムWordpressテーマを使用しています。テーマはStrapPressと呼ばれています。グリッドを使い始めて、非常に基本的な方法で設定しようとしていますが、グリッドは奇妙な方法で動作しています。私が欲しいのは、9つの列と3つのサイドバーで構成されるメインコンテンツセクションです。9つの列の中に、コンテンツの異なる領域を持つネストされた列を含めることができるようにしたいと思います。1つのページで、最初のセクションは9つの列全体になり、その下のコンテンツは3つの等しいセクションに分割されます。

次のコードは、9列の最初のセクションがなくても正常に設定されます。

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER -->
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT -->

        <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                BLOG
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                RECIPE
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                LISTING
            </div>
        </div>

    </div> <!-- END OF MAIN CONTENT -->

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR -->
        SIDE
    </div> <!-- END SIDEBAR -->

</div> <!-- END OF MAIN FLUID CONTAINER -->

'redBorder'は、視覚化に役立つように、すべての周りに1pxの赤い境界線を追加するだけです。 これがこの時点での様子です。

ただし、次のセクションを追加するとすぐに、その下のコンテンツに影響します。新しいコードは次のとおりです。

 <div class="row-fluid"> <!-- MAIN FLUID CONTAINER -->
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT -->

        <div class="searchSection redBorder" style="height: 100px;">
            SEARCH SECTION
        </div>

        <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                BLOG
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                RECIPE
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                LISTING
            </div>
        </div>

    </div> <!-- END OF MAIN CONTENT -->

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR -->
        SIDE
    </div> <!-- END SIDEBAR -->

</div> <!-- END OF MAIN FLUID CONTAINER -->

そのときの様子は次のとおりです。 第二部

なぜそれがこれをしているのか誰もが知っていますか？これらの9つの列の先頭にコンテンツを追加すると、下の列に、コンテナーに収まらないようにパディングが追加されるのはなぜですか？

4

1 に答える 1

9

これは、グリッドが行とスパンで機能する方法、特にBootstrapのCSSの次のルールによるものです。

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

したがって、最初にコンテンツを追加するということは、他のspan*要素がそれらの前にマージンを取得することを意味します。searchSectionは全幅であるため、最初のspan4は次の行に折り返され、マージンがあります。検索セクションを全幅にしたい場合、安全な方法は、span4の周りに別の行流体を配置することです。

    <div class="searchSection redBorder" style="height: 100px;">
        SEARCH SECTION
    </div>

    <div class="row-fluid">
        <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                BLOG
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                RECIPE
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                LISTING
            </div>
        </div>
    </div>

</div> <!-- END OF MAIN CONTENT -->

これは、ドキュメントのネスト列セクション（http://twitter.github.com/bootstrap/scaffolding.html#gridSystem ）でも説明されています。

于 2012-09-15T22:45:05.110 に答える