私はTwitter Bootstrap 3を使用しています。divたとえば、垂直方向に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それを修正するためにを使ってみましたが、これはレスポンシブデザインの良い解決策ではないと思います。

この回答はハックを示していますが、（@ Haschem回答で述べられているように）flexboxを使用することを強くお勧めします。

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

柔軟なボックスレイアウト

CSSフレキシブルボックスの登場により、Webデザイナーの多くの悪夢¹が解決されました。最もハックなものの1つである垂直方向の配置。今では未知の高さでも可能です。

「20年のレイアウトハックが終わりに近づいています。おそらく明日ではなく、すぐに、そして私たちの残りの人生に。」

— CSS Legendary Eric Meyer at W3Conf 2013

フレキシブルボックス（または、Flexbox）は、レイアウト目的のために特別に設計された新しいレイアウトシステムです。仕様状態：

フレックスレイアウトは、表面的にはブロックレイアウトに似ています。フロートや列など、ブロックレイアウトで使用できるより複雑なテキストまたはドキュメント中心のプロパティの多くが欠けています。その代わりに、Webアプリケーションや複雑なWebページで必要になることが多い方法でスペースを分散し、コンテンツを調整するためのシンプルで強力なツールを利用できます。

この場合どのように役立ちますか？さて、見てみましょう。

垂直に配置された列

Twitter Bootstrapを使用する.rowと、いくつか.col-*のsがあります。必要なのは、目的の.row²をフレックスコンテナーボックスとして表示し、そのすべてのフレックスアイテム（列）をalign-itemsプロパティによって垂直方向に配置することだけです。

ここに例 （注意してコメントを読んでください）

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

出力

色付きの領域は、列のパディングボックスを表示します。

明確にする align-items: center

8.3軸間整列：align-itemsプロパティ

フレックスアイテムは、垂直方向に似ていますが、フレックスコンテナーの現在の行の交差軸に配置できますjustify-content。align-items匿名フレックスアイテムを含む、フレックスコンテナーのすべてのアイテムのデフォルトの配置を設定します。

align-items: center; 中心値によって、フレックスアイテムのマージンボックスは、ライン内の交差軸の中央に配置されます。

ビッグアラート

重要な注意＃1： Twitter Bootstrapはwidth、.col-xs-#クラスにいずれかのクラスを指定しない限り、超小型デバイスの列の数を指定しません。

したがって、この特定のデモでは、列を明示的に.col-xs-*指定するため、列をモバイルモードで適切に表示するためにクラスを使用しましたwidth。

ただし、特定の画面サイズに変更するだけで、Flexboxレイアウトをオフにすることもできます。例えば：display: flex;display: block;

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

または、次のように特定の画面サイズのみを指定する.vertical-align こともできます。

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

その場合、@ KevinNelsonのアプローチを使用しますます。

重要な注意＃2：簡潔にするために、ベンダープレフィックスは省略されています。その間、フレックスボックスの構文が変更されました。新しい記述された構文は、古いバージョンのWebブラウザーでは機能しません（ただし、Internet Explorer 9ほど古いものではありません！FlexboxはInternet Explorer 10以降でサポートされています）。

これは、次のようなベンダー接頭辞付きのプロパティも使用する必要があることを意味します display: -webkit-box、プロダクションモードでは、ます。

クリックすると 、「トグルコンパイルビュー」でデモ、あなたは（のおかげで接頭辞CSS宣言のバージョンがわかりますAutoprefixerを）。

コンテンツが垂直方向に整列したフルハイトの列

前のデモで見たように、列（フレックスアイテム）はコンテナー（フレックスコンテナーボックス、つまり.row要素）ほど高くありません。

これはcenter、align-itemsプロパティに値を使用しているためです。デフォルト値はstretch、アイテムが親要素の高さ全体を埋めることができるようにするためです。

それを修正するためにdisplay: flex;、列に追加することもできます：

ここに例（ここでも、コメントを気にしてください）

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

出力

色付きの領域は、列のパディングボックスを表示します。

最後に、重要なことですが、ここでのデモとコードスニペットは、異なる目的を提供し、目標を達成するための最新のアプローチを提供することを目的としています。「ビッグアラートこのアプローチを実際のWebサイトまたはアプリケーションで使用する場合は」セクションに。

ブラウザのサポートを含めてさらに読むには、次のリソースが役立ちます。

• Mozilla Developer Network-フレキシブルボックス
• Flexboxのガイド-CSSトリック
• HTML5Rocks-Flexboxクイック
• SmashingMagazine-Flexboxを使用した要素の中央揃え
• フィリップ・ウォルトン-フレックスボックスによって解決
• 使用できます：フレキシブルボックスレイアウトモジュール

^{1. div内の画像をレスポンシブな高さに垂直に配置します 。2. Twitter Bootstrapのデフォルトを変更しないようにするために、追加のクラスを使用することをお勧めします.row。}

以下のコードは私のために働きました：

.vertical-align {
    display: flex;
    align-items: center;
}

アップデート2020

元の質問はBootstrap 3に関するものでしたが、Bootstrap 4がリリースされたので、垂直方向の中心に関する更新されたガイダンスをいくつか示します。

重要！ 垂直方向の中心は親の高さを基準にしています

あなたがセンターにしようとして要素の親が何も定義されている場合は 、高さが、どれも垂直センタリングソリューションのは動作しません！

ブートストラップ4

Bootstrap 4がデフォルトでflexboxになったので、auto- margins、flexbox utils、またはdisplay utilsとvertical align utilsを使用して、垂直方向の配置にさまざまなアプローチがあります。最初は "vertical align utils"は明らかなようですが、これらはインラインおよびテーブル表示要素でのみ機能します。以下は、Bootstrap 4の垂直方向の中央揃えオプションです。

1-自動マージンを使用した垂直中心：

垂直方向に中央揃えするもう1つの方法は、を使用することmy-autoです。これにより、要素がコンテナの中央に配置されます。たとえばh-100、行を全高にしmy-auto、col-sm-12列を垂直方向に中央揃えにします。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4-自動マージンデモを使用した垂直方向の中心

my-auto 垂直y軸のマージンを表し、次と同等です。

margin-top: auto;
margin-bottom: auto;

2-Flexboxを備えた垂直中心：

Bootstrap 4 .rowは現在、任意の列でdisplay:flex使用align-self-centerして垂直方向に中央揃えすることができます...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

または、align-items-center全体.rowを使用してcol-*、行のすべてを垂直方向に中央揃えにします...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

ブートストラップ4-垂直中央の異なる高さの列のデモ

3-Display Utilsを使用した垂直中心：

ブートストラップ4が有する表示utilsのために使用することができるdisplay:table、display:table-cell、display:inline、など。これらを一緒に使用することができる垂直配向utilsの整列インラインに、インラインブロック又はテーブルセル要素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4-Display Utils Demoを使用した垂直方向の中心

参照： Bootstrap 4の垂直方向の中央揃え

ブートストラップ3

中央に配置するアイテムのコンテナーのFlexboxメソッド：

.display-flex-center {
    display: flex;
    align-items: center;
}

translateYメソッドの変換：

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

インラインメソッドの表示：

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

Bootstrap 3のセンタリング手法のデモ

divのCSSでこれを試してください：

display: table-cell;
vertical-align: middle;

@mediaクエリ自体に慣れていない他の人を助けるために、私の「解決策」を共有したいと思いました。

@HashemQolamiの回答のおかげで、col- *クラスのようにモバイルで機能するメディアクエリをいくつか作成しました。これにより、モバイルではcol- *をスタックできますが、大きな画面では中央に垂直に整列して表示できます。

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

。

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

画面解像度ごとに異なる列数を必要とするより複雑なレイアウト（たとえば、-xsの場合は2行、-smの場合は3行、-mdの場合は4行など）は、より高度な調整が必要ですが、-xsを使用した単純なページの場合スタックされ、-smで行が大きい場合、これは正常に機能します。

承認された回答に従って、マークアップをカスタマイズしたくない場合、懸念事項の分離のため、または単にCMSを使用するために、次の解決策はうまく機能します。

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <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>

ここでの制限は、行が空白を削除するためにフォントサイズを0に設定するため、親要素からフォントサイズを継承できないことです。

私はこの方法をデビッドウォルシュ垂直中心CSSに従って好みます：

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

これtransformは必須ではありません。中心をもう少し正確に見つけるだけです。その結果、Internet Explorer 8の中心が少し下がる可能性がありますが、それでも問題はありません- 使用できますか-2dを変換します。

これが私の解決策です。このクラスをCSSコンテンツに追加するだけです。

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

次に、HTMLは次のようになります。

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

私はこれをやっただけで、やりたいことをやってくれます。

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

そして今私のページは次のようになります

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

次のコードはChromeを使用して動作し、現在選択されている回答以外のブラウザでは動作しないことが本当にわかります。

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootplyリンク

必要に応じて、高さを修正し（特にで.v-center）、divを削除/変更する必要がある場合がありdiv[class*='col-']ます。

私はこれと同じ問題に遭遇しました。私の場合、私は外側のコンテナーの高さを知りませんでしたが、これは私がそれを修正した方法です：

まず、htmlとbody要素の高さを100％になるように設定します。これは重要！これがないと、htmland body要素は単に子の高さを継承します。

html, body {
   height: 100%;
}

次に、次のような外部コンテナクラスを作成しました。

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

そして最後にクラスを持つ内部コンテナ：

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTMLは次のように単純です。

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

これは、コンテンツを垂直方向に配置するために必要なすべてです。フィドルで確認してください：

Jsfiddle

テーブルとテーブルセルは必要ありません。変換を使用して簡単に実現できます。

例：http : //codepen.io/arvind/pen/QNbwyM

コード：

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Lessを使用している場合バージョンのBootstrap CSSに自分でコンパイルする場合は、いくつかのユーティリティクラスを使用してBootstrapクラスで使用できます。

これらは、Bootstrapグリッドシステムの応答性と構成可能性を維持したい場合に、非常にうまく機能することがわかりました（-mdまたは-sm）にが、特定の行のすべての列の垂直方向の高さをすべて同じにしたいので（次に、コンテンツを垂直方向に揃え、行のすべての列で共通の中央を共有します）。

CSS /少ない：

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML：

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

さまざまな画面サイズでさまざまな列サイズを混在させる場合に使いやすくするために、zessxの答えについて少し詳しく説明しました。

Sassを使用する場合、これをscss-fileに追加できます。

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

これにより、次のCSSが生成されます（Sassを使用していない場合は、スタイルシートで直接使用できます）。

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

これで、次のようにレスポンシブ列で使用できます。

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

Flexの動作は、Bootstrap 4以降でネイティブにサポートさd-flex align-items-centerれています。rowます。CSSコンテンツを変更する必要はありません。

簡単な例：http : //jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

あなたの例：http : //jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

ソース：フレックス・ブートストラップ

さて、偶然にいくつかのソリューションを混ぜてみましたが、これが私のレイアウトでようやく機能し、最小解像度でBootstrap列のある3x3テーブルを作成しようとしました。

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

これを試して、

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

それを行うには、いくつかの方法があります。

1. 使用する 

   display: table-cell;
   vertical-align: middle;

   コンテナのCSS

   display: table;

2. 画面サイズに応じてパディングを変更するには、メディア画面とともにパディングを使用します。詳細はGoogle @media screenをご覧ください。

3. 相対パディングを使用する

   つまり、％でパディングを指定します

Bootstrap 4（現在アルファ版）を使用すると、.align-items-centerクラスを使用できます。したがって、Bootstrapの応答性を維持できます。すぐにうまくいきます。Bootstrap 4のドキュメントを参照してください。

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;
}

いくつかのdiv要素を垂直方向に一列に揃えたいと同じ状況に遭遇し、Bootstrapクラスcol-xx-xxがfloat：leftとしてスタイルをdivに適用することがわかりました。

style = "Float：none"のようなdiv要素にスタイルを適用する必要があり、すべてのdiv要素が垂直方向に整列し始めました。これが実際の例です：

<div class="col-lg-4" style="float:none;">

JsFiddleリンク

誰かがfloatプロパティの詳細を読みたい場合に備えて：

W3Schools-フロート