允许范围在twitter引导中溢出

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。

Answer 1

体外容器上方的行尝试将其设置为margin-left：-100％沿w/body-bg.png，然后在extra-body-contain将余量保留为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> 

希望这有助于或至少可以让你在正确的方向。

Answer 2

看起来像（如你所说），你只是有几件事情无序

这里是一个修改后的小提琴。 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> 

编辑：要实现两个重叠的侧边栏和你将必须得到那种哈克与你的CSS的宽度为100％，而我不一定赞同，但是是有可能的，当然， 一切皆有可能。

http://jsfiddle.net/2Yet7/（对不起，它太难看了）。