Разрешить строку переполнения в 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> 

Я попытался установить поплавок на боковой панели, но это не сработало. Я не уверен, способ, которым у меня есть мой html, позволит мне сделать это или нет, только изменив мой CSS.

Answer 1

строка над контейнером с дополнительным корпусом попробуйте установить его влево-влево: -100% вдоль w/body-bg.png, а затем на дополнительном содержимом положить маржи слева на 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> 

EDIT: Для того, чтобы достичь как перекрывающийся боковую панель и ширину 100% вы собираетесь иметь, чтобы получить вид Hacky с CSS, и я не обязательно одобряет его, но это возможно, конечно , все возможно.

http://jsfiddle.net/2Yet7/ (извините, его так уродливый).