Twitter Bootstrap网格未按预期工作

Question

我正在使用基于Twitter的Bootstrap的高级Wordpress主题。这个主题叫做StrapPress。 我刚刚开始使用网格并试图以一种非常基本的方式进行设置，但是网格以奇怪的方式运行。 我想要的是一个由九列组成的主要内容部分，以及一个三边栏。 在九列中，我希望能够嵌套具有不同内容区域的列：在一个页面上，第一个部分将是整个九列，然后它下面的内容将被分成三个相等的部分。

以下代码设置正常，没有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 -->

以下是它的样子：

任何人都知道为什么这样做？ 为什么要在这九列的开头添加一些内容会导致下面的这些列以不再适合其容器的方式向自己添加填充？

Answer 1

这是因为网格使用行和跨度的方式，特别是Bootstrap的CSS中的这个规则：

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

因此，为什么在开头添加内容意味着其他span *元素在它们之前获得边距。 searchSection是全宽的，因此第一个span4包装到下一行并具有边距。假设您希望搜索部分为全宽，那么安全的方法是在span4s周围添加另一个行 -

    <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的嵌套列部分中也对此进行了解释。