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

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