Bootstrap 3 Column Wrapping - 占据一列中可用的 space

Question

我正在为如何让事情与 Bootstrap 正确排列而苦苦挣扎 3. 当一列换行时，我希望它向上滚动到最后一个 div 的底部。

很多时候，我的侧边栏会超过正文的长度。侧栏中的信息不如主框重要，但比底部的信息重要。

如何让下例中的两个绿色部分在更大的屏幕上对齐？

查看示例代码 - http://www.bootply.com/42XM6PGoDS

.example{
    background-color: green;
    min-height:200px
      
  }
  
.example2{
  background-color: red;
  min-height:500px;
}

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <div class="example">
        Main Body of Information
      </div>
    </div>
    <div class="col-lg-4">
      <div class="example2">
        Important information on sidebar when on a large screen
      </div>
    </div>
    <div class="col-lg-8">
      <div class="example">
        Less important information
      </div>
    </div>
  </div>
</div>

Answer 1

如何创建包含 2 列（如 col--9 和 col--3）的主页，其中 col-3 用于侧边栏。那么您在主页中添加的所有内容都不会出现您所说的差距...

示例：

<div class="row">
    <div class="col-sm-9">
        <!-- Main page content here -->
    </div>
    <div class="col-sm-3">
        <!-- Sidebar content here -->
    </div>
</div>

Answer 2

一种方法是简单地使用边栏上的 pull-right。这将使第二列保持在右侧。

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <div class="example">
        Main Body of Information
      </div>
    </div>
    <div class="col-lg-4 pull-right">
      <div class="example2">
        Important information on sidebar when on a large screen
      </div>
    </div>
    <div class="col-lg-8">
      <div class="example">
        Less important information
      </div>
    </div>
  </div>
</div>

http://bootply.com/IGLRYDnc2S

Bootstrap 3 Column Wrapping - 占据一列中可用的 space

Bootstrap 3 Column Wrapping - Take up the available space in a column

html

responsive-design

twitter-bootstrap

twitter-bootstrap-3