我有一个动态的嵌套网格布局,使用bootstrap 3框架实现,对于所有屏幕大小都能正常工作,但是我无法弄清楚如何填充垂直空间,使得顶级列具有相同的高度。
这是中等屏幕的问题图像(抱歉,没有足够的声望来嵌入图像):Nested bootstrap vertical height problem。我想要“LEFT BOX”和“RIGHT BOX”延伸到“Bottom Bar”。
我尝试过这里发布的解决方案:How can I make bootstrap columns all the same height,以及其他各种地方,但是它们似乎都不能与嵌套网格一起使用。
非常感谢任何帮助。
我已经在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>