コンテンツはブートストラップのサイドバー下にあります

Question

ブートストラップに関しては比較的初心です。コンテンツを適切なコンテンツブロックの下で全幅に伸ばしたいと思っています。私は何をしようとしているのかを示すのに役立つスクリーンキャストを付けました。私は右のブロックでオフセットを使用しようとしましたが、それは私がしたいことをしません。ブートストラップがこれを処理する方法はありますか？これはカスタム作成する必要があるものですか？ここで

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の1つで、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