Bootstrap 3 - 列包裝 - 佔用列中的可用空間

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

一種方法是簡單地在側邊欄使用pull-right ..

​​

http://bootply.com/IGLRYDnc2S

Answer 2

什麼2列（如同事-9和同事 -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>