[解決済み] Bootstrap3による垂直方向の整列

質問

Twitter Bootstrap 3 を使用していますが、2つの 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>

Bootstrap のグリッドシステムは float: left ではなく display:inline-block というプロパティがあります。 vertical-align は機能しません。私は margin-top を使えば解決するのですが、レスポンシブデザインには向いていないような気がします。

どのように解決するのですか？

この回答ではハックを紹介していますが、ぜひフレックスボックス( ハシェム回答 というのも、現在ではあらゆるところでサポートされているからです。

デモのリンクです。
- ブートストラップ3
- ブートストラップ4アルファ6

それでも必要な時にカスタムクラスを使うことができます。

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

ブートプライ

使用方法 inline-block は、ブロックとブロックの間に余分なスペースがある場合（例えば ...</div> </div>... ). この余分なスペースは、列のサイズが12まで増えると、グリッドを壊してしまいます。

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

ここでは <div class="[...] col-lg-2"> と <div class="[...] col-lg-10"> (キャリッジリターンと2つのタブ/8つのスペース)。それで...

この余分な空間を蹴散らそう!!!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

<イグ

注目すべきは 一見すると 無駄なコメント <!-- ... --> ? それらは 重要 -- の間に空白が生じます。 <div> 要素がレイアウト上のスペースを占め、グリッドシステムを壊してしまいます。

注：Bootplyは更新されました