Bootstrap側邊欄下的內容

Question

關於Bootstrap，我還是個新手。 我希望在正確的內容塊下將內容拉伸到全角。 我已附上了一個截屏視頻，該視頻應有助於顯示我的工作意圖。 我嘗試在正確的塊上使用offset，但是它沒有實現我想要的功能。 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的幫助器類之一，並迫使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