使用 CSS 的 Bootstrap 3 Grid 中的垂直 DIV 对齐答案

【问题标题】：Vertical DIV alignment within Bootstrap 3 Grid with CSS使用 CSS 的 Bootstrap 3 Grid 中的垂直 DIV 对齐
【发布时间】：2014-08-08 07:24:46
【问题描述】：

我正在使用引导程序 3，当我想垂直对齐两个 div 时遇到问题，例如 (http://jsfiddle.net/Xelnag/335nhneq/)

<div class="row">
    <div class="col-sm-6 vbox">
        <img src="img/1.png" class="icon-16"/> 
        <img src="img/2.png" class="icon-16"/>
    </div>
    <div class="col-sm-6">
        <img src="img/3.png" class="icon-32"/> 
        <img src="img/4.png" class="icon-32"/> 
        <img src="img/5.png" class="icon-32"/>
    </div>
</div>

“vbox”的 CSS 只是垂直对齐：

.vbox { vertical-align: bottom; }

我希望看到的是左 div 与底部对齐以匹配右侧。

我已经在 stackoverflow 中看到了使用 javascript 的答案，但到目前为止我还没有发现仅适用于 CSS 和 bootstrap 3 响应式设计的答案。

【问题讨论】：

?
是的，这可行，但我在想是否有更动态的方法:)

<div class="row"> <div class="table-container"> <div class="col-xs-6 vbox" style="border:1px solid #000"> <img src="img/1.png" class="icon-16"/> <img src="img/2.png" class="icon-16"/> </div> <div class="col-xs-6 vbox" style="border:1px solid #F00"> <img src="img/3.png" class="icon-32"/> <img src="img/4.png" class="icon-32"/> <img src="img/5.png" class="icon-32"/> </div> </div> </div>

.table-container .vbox {display: table-cell; float: none; vertical-align: bottom; } .table-container { display: table; table-layout: fixed; width: 100%; } .icon-16 { width: 16px; height: 16px; } .icon-32 { width: 32px; height: 32px; }