☰

Bootstrap 3 で垂直に揃える 質問する

tag-icon • tag-icon html css twitter-bootstrap twitter-bootstrap-3
Bootstrap 3 で垂直に揃える 質問する

div私はTwitter Bootstrap 3を使用していますが、例えば2つの要素を垂直に揃えたいときに問題が発生します。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修正しようとしましたが、これはレスポンシブ デザインには適した解決策ではないと思います。

ベストアンサー1

この回答はハックを提示していますが、flexboxを使用することを強くお勧めします（@Haschem の回答) は、現在ではどこでもサポートされているためです。

デモリンク:
-ブートストラップ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 が更新されました

おすすめ記事