允許範圍在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/（對不起，它太難看了）。