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

Bootstrap中侧边栏下的内容

1 个答案: