質問: bootstrap 3と垂直に揃える 私はtwitter bootstrap 3を使用していますが、2つのdivを垂直方向に整列させたいときに問題があります。例えば、 - jsfiddle link : <!-- 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> bootstrapのグリッドシステムはfloat: leftではなくdisplay:inline-blockを使用するため、プロパティvertical-alignは機能しません。私はmargin-topを使ってそれを修正しようとしました、しかしこれはレスポンシブデザインのための良い解決策ではないと思います。
回答: html<div class="row"> <div class="col-xs-2 pull-bottom" style="height:100px;background:blue"> </div> <div class="col-xs-8 pull-bottom" style="height:50px;background:yellow"> </div> </div> css.pull-bottom { display: inline-block; vertical-align: bottom; float: none; }