html - Bootstrap 侧边栏下的内容

Question

在 Bootstrap 方面，我是一个新手。我希望内容在正确的内容 block 下被全宽拉伸(stretch)。我附上了一个截屏视频，它应该有助于展示我正在尝试做的事情。我试过在右边的 block 上使用偏移量，但它没有达到我想要的效果。 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