与Bootstrap 3垂直对齐

问题：

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div , for example — JSFiddle link : 我正在使用Twitter Bootstrap 3，并且在要垂直对齐两个div时遇到问题，例如-JSFiddle链接：

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div>

The grid system in Bootstrap uses float: left , not display:inline-block , so the property vertical-align doesn't work. Bootstrap中的网格系统使用float: left ，而不使用display:inline-block ，因此属性vertical-align不起作用。 I tried using margin-top to fix it, but I think this is not a good solution for the responsive design. 我尝试使用margin-top进行修复，但是对于响应式设计，这不是一个好的解决方案。