css - 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 周围放置另一个 row-fluid:

    <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 .