Question

我正在努力解决如何使用Bootstrap 3正确排列内容。当列包装时，我希望它向上滚动到最后一个div的底部。

通常，我会有一个超过主体长度的侧边栏。侧栏中的信息不如主箱那么重要，但比底部的信息更重要。

如何让以下示例中的两个绿色部分在更大的屏幕上排列？

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 - 占用列中的可用空间

2 个答案: