Question

我希望我的侧边栏溢出后台更改我的布局。

您可以在jsfiddle here中查看我目前的情况。我确信我的下面的html中写的东西不按顺序排列。我希望深灰色直接显示在最近的帖子图片下方，但允许侧边栏向下展开。我不能只使用背景图像来执行此操作，因为较轻内容的长度将在其他wordpress模板页面上更改。

这是我目前的代码

<div id="main-content-container">
    <div class="container">
        <div class="row">
            <div id="main-content" class="span9">
                <div class="row">
                    <div id="featured-article" class="span9"><img src="http://placehold.it/715x340" /></div>
                </div>
                <div id="recent-posts" class="row">
                    <div class="span9">
                        <div class="row">
                            <div class="span9">
                                <h1>Recent Posts</h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="span3"><img src="http://placehold.it/220" /></div>
                            <div class="span3"><img src="http://placehold.it/220" /></div>   
                            <div class="span3"><img src="http://placehold.it/220" /></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sidebar" class="span3">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque.

                  Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.
                </p>
            </div>
        </div>
    </div>
</div>

<div id="extra-body-container">
    This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.
</div>

我试图在侧边栏上设置一个浮点但是没有用。我不确定我的html方式是否允许我这样做或者只修改我的CSS。

What result Im getting with my code

Answer 1

看起来（正如你所说的）你刚刚发生了一些无序的事情

这是一个修改过的小提琴。 http://jsfiddle.net/3sBkk/1/

实际上只是将内容移动到主包装元素中，然后创建一行，将范围调整为12，并设置侧边栏的z顺序以确保其重叠。

我不确定如何在此处包含代码，但这是罪魁祸首。

          <div id="recent-posts" class="row">
                <div class="span9">
                    <div class="row">
                        <div class="span9">
                                <h1>Recent Posts</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                    </div>
                    <div class="row">
                       <div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div> 
                    </div>
                </div>
            </div>

编辑：为了实现重叠的侧边栏和100％的宽度，你将不得不对你的css产生一些hacky，我不一定赞同它，但是有可能，当然，任何事情都是可能的

http://jsfiddle.net/2Yet7/（对不起，这太丑了）。

Answer 2

额外体容器上方的行尝试将其设置为margin-left：-100％沿着w / body-bg.png然后在extra-body-contains上将margin-left设置为50％并且宽度为100％

请在此处查看：http://jsfiddle.net/3sBkk/9/show/

<div id="main-content-container">
<div class="container">
    <div class="row">
        <div id="main-content" class="span9">
            <div class="row">
                <div id="featured-article" class="span9">
                    <img src="http://placehold.it/715x340" />
                </div>
            </div>
            <div id="recent-posts" class="row">
                <div class="span9">
                    <div class="row">
                        <div class="span9">
                                <h1>Recent Posts</h1>

                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                    </div>
                    <div class="row" style="margin-left: -100%; background: url('../img/extra-body-bg.png') #AAAAAA repeat-x top center;">
                        <div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sidebar" class="span3" style="z-index: 999;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque. Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.</p>
        </div>
    </div>
</div>

希望这有助于或至少让你朝着正确的方向前进。

允许跨度在twitter bootstrap中溢出行

2 个答案: