css - 允许跨度在 Twitter Bootstrap 中溢出行

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>

我曾尝试在侧边栏上设置 float ，但没有成功。我不确定我的 html 方式是否允许我只修改我的 css 就可以做到这一点。

Answer 1

extra-body-container 上方的行尝试将其设置为 margin-left: -100% along the body-bg.png 然后在 extra-body-contain 上将 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>

希望这对您有所帮助，或者至少让您朝着正确的方向前进。