Содержимое под боковой панелью в Bootstrap

Question

Я относительно новичок, когда дело доходит до Bootstrap. Я хочу, чтобы контент растягивался по всей ширине под правильным блоком содержимого. Я прикрепил скринкаст, который должен помочь показать, что я пытаюсь сделать. Я попытался использовать смещение в правом блоке, но он не делает то, что я хочу. Есть ли способ, которым Bootstrap обрабатывает это, или это то, что должно быть написано на заказ?

http://screencast.com/t/ZxJGOBEy

Вот мой код (который не так много):

<div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="col-md-8"> 

       <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> 

       <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> 

       <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> 
      </div> 

      <div class="col-md-4"> 
       <img src="http://dummyimage.com/200" /> 
       <img src="http://dummyimage.com/200" /> 
      </div> 
     </div> 
    </div> 

Answer 1

Итак, что у вас есть сейчас две бок о бок колонны. Текст от .col-md-8 никогда не может пересекаться с другим столбцом, потому что у них есть свои собственные отдельные поля, их собственные домены. Чтобы получить эффект, который вам нужен, вам нужно ввести обертку div вокруг ваших изображений в обертку div вокруг текста и добавить к ней .pull-right (это один из Bootstrap's helper classes и заставляет div поплавать вправо), например, :

<div class="col-md-4 pull-right"> 
     <img src="http://dummyimage.com/200" /> 
     <img src="http://dummyimage.com/200" /> 
    </div> 

Вы можете увидеть результат здесь: http://codepen.io/angeliquejw/pen/zqwpgg?editors=1000