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。