css – Twitter Bootstrap网格未按预期工作

我正在使用基于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 -->

这是它的样子：

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

解决方法

这是因为网格使用行和跨度的方式,特别是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的嵌套列部分中解释的.

原文链接：https://www.f2er.com/css/213964.html

css – Twitter Bootstrap网格未按预期工作

解决方法

猜你在找的CSS相关文章