如何使用嵌套自舉網格使外列具有相同高度

Question

我有一個嵌套網格的動態引導3佈局，它以我想要的所有屏幕大小的方式工作，除了我無法弄清楚如何填充垂直空間這樣頂層的列就是相同的高度。

下面是中畫面問題的圖片（對不起，沒有足夠的代表嵌入圖片）：Nested bootstrap vertical height problem。我希望「左框」和「右框」向下延伸到「底欄」。

我已經嘗試過這裏發佈的解決方案：How can I make bootstrap columns all the same height和其他各種地方，但他們沒有一個似乎與嵌套網格一起工作。

任何幫助非常感謝。

我已經把樣品上on Fiddler看起來像這樣：

CSS：

.container { 
    margin-top: 10px; 
} 

.dark { 
    background: #444; 
    color: #DDD; 
} 

.light { 
    background: #DDD; 
    color: #222; 
} 

.content { 
    padding: 30px; 
    margin: 0; 
} 

.image { 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    vertical-align: bottom; 
} 

HTML：

<div class="container"> 
<div class="row"> 
    <div class="col-sm-8"> 
    <div class="row"> 
     <div class="col-md-12 dark image"> 
     <img src="https://s20.postimg.io/kdweqmuzx/postimage.gif" width="100%" /> 
     </div> 
     <div class="col-md-6 dark content"> 
     <h2>LEFT BOX</h2> 
     <br /> 
     <br /> 
     <br /> 
     </div> 
     <div class="col-md-6 light content"> 
     <h2>RIGHT BOX</h2> 
     <br /> 
     <br /> 
     <br /> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-4 dark"> 
    <div class="row"> 
     <div class="dark content"> 
     <h2>RIGHT PANEL</h2> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="dark image"> 
     <img src="https://s20.postimg.io/5cu49dca5/postimage.gif" width="100%" class="bottom" /> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="row dark"> 
    <div class="col-sm-12 dark content"> 
     <h2>Bottom Bar</h2> 
    </div> 
</div> 
</div> 

Answer 1

我能得到這個工作使用修改版本的這裏描述的額外保證金/填充/溢出技巧：How can I make bootstrap columns all the same height

因爲它表明解決方案不適用於嵌套網格，因爲如果您向所有行應用溢出：隱藏，則它將剪切內部行上的額外填充。

取而代之，我把溢出：隱藏頂層集裝箱，現在它的工作！僅供參考我也試過把溢出：隱藏對內容類，它在Chrome中有效果，但不是Firefox或Edge。

實施例上的jsfiddle：http://jsfiddle.net/jccaulfield/ggjwwuup/3/

.container { 
overflow: hidden; 
} 

.dark { 
background: #444; 
color: #DDD; 
} 

.light { 
background: #DDD; 
color: #222; 
} 

.content { 
padding: 30px; 
margin: 0; 
margin-bottom: -999px; 
padding-bottom: 999px; 
overflow: hidden; 
} 

.image { 
padding: 0; 
margin: 0; 
}