Я использую 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>

Система сетки в Bootstrap использует float: left, нет display:inline-block, поэтому свойство vertical-alignне работает. Я попытался использовать, margin-topчтобы исправить это, но я думаю, что это не очень хорошее решение для адаптивного дизайна.

Этот ответ представляет собой взлом, но я настоятельно рекомендую вам использовать flexbox (как указано в ответе @Haschem ), поскольку теперь он поддерживается везде.

Демонстрационная ссылка:
- Bootstrap 3
- Bootstrap 4 alpha 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>

Bootply

Использование 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 Flexible Box многие кошмары веб-дизайнеров ¹ были разрешены. Один из самых хакерских, вертикальное выравнивание. Теперь это возможно даже на неизвестных высотах .

«Два десятилетия взлома макетов подходят к концу. Может быть, не завтра, но скоро и на всю оставшуюся жизнь».

- Легендарный CSS Эрик Мейер на W3Conf 2013

Flexible Box (или вкратце Flexbox) - это новая система макетов, специально разработанная для макетов. В спецификации говорится :

Flex-макет внешне похож на блочный макет. В нем отсутствуют многие более сложные тексто- или документо-ориентированные свойства, которые можно использовать в макете блока, такие как плавающие элементы и столбцы. Взамен он получает простые и мощные инструменты для распределения пространства и выравнивания контента способами, которые часто требуются веб-приложениям и сложным веб-страницам.

Как это может помочь в этом случае? Ну что ж, посмотрим.

Выровненные по вертикали столбцы

Используя 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свойство

Элементы Flex могут быть выровнены по поперечной оси текущей линии контейнера Flex, аналогично, justify-contentно в перпендикулярном направлении. align-itemsустанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные элементы flex .

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 «s подход .

Важное примечание № 2: префиксы поставщиков опущены из-за краткости. Синтаксис Flexbox был изменен в течение времени. Новый письменный синтаксис не будет работать в старых версиях веб-браузеров (но не такой старый, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).

Это означает, что вы также должны использовать свойства с префиксом поставщика, такие как display: -webkit-boxи так далее, в рабочем режиме.

Если вы нажмете «Toggle Compiled View» в демоверсии , вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer ).

Полноразмерные столбцы с вертикальным выравниванием содержимого

Как вы видели в предыдущей демонстрации , столбцы (элементы flex) больше не так высоки, как их контейнер (коробка flex-контейнера..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  */
}

Выход

Цветная область отображает отступы столбцов.

И последнее, но не менее важное : обратите внимание, что приведенные здесь демонстрации и фрагменты кода предназначены для того, чтобы дать вам другую идею, предоставить современный подход к достижению цели. Пожалуйста, обратите внимание на раздел « Big Alert », если вы собираетесь использовать этот подход в реальных веб-сайтах или приложениях.

Для дальнейшего чтения, включая поддержку браузера, эти ресурсы будут полезны:

• Сеть разработчиков Mozilla - Гибкие коробки
• Руководство по Flexbox - хитрости CSS
• HTML5Rocks - Flexbox быстро
• SmashingMagazine - Центрирующие элементы с Flexbox
• Филип Уолтон - решено Flexbox
• Могу ли я использовать: модуль гибкой коробки

^{1. Вертикально выровняйте изображение внутри div с отзывчивой высотой. 2. Лучше использовать дополнительный класс, чтобы не изменять настройку Twitter Bootstrap по умолчанию .row.}

Код ниже работал для меня:

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

Обновление 2020

Я знаю, что оригинальный вопрос был для Bootstrap 3, но теперь, когда Bootstrap 4 был выпущен, вот некоторые обновленные рекомендации по вертикальному центру.

Важный! Вертикальный центр относительно высоты родителя

Если родительский элемент элемента, который вы пытаетесь отцентрировать, не имеет определенной высоты , ни одно из решений для вертикального центрирования не будет работать!

Bootstrap 4

Теперь, когда Bootstrap 4 является flexbox по умолчанию, есть много разных подходов к вертикальному выравниванию, используя: auto-margins , flexbox utils или отображения вместе с вертикального выравнивания . Поначалу «утилиты вертикального выравнивания» кажутся очевидными, но они работают только с элементами линейного и табличного отображения. Вот несколько вариантов вертикальной центровки Bootstrap 4:

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>

Bootstrap 4 - вертикальный центр колонн разной высоты Демо

3 - Вертикальный центр с использованием утилит дисплея:

Бутстрап 4 имеет дисплей утилиты , которые могут быть использованы для display:table, display:table-cell, display:inlineи т.д .. Они могут быть использованы с вертикальными утилитами выравнивания для выравнивания инлайн, встроенный блок или элементы ячеек таблицы.

<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 - вертикальный центр с использованием утилит дисплея Demo

См. Также: Центр вертикального выравнивания в Bootstrap 4

Bootstrap 3

Метод Flexbox на контейнере элемента (ов) по центру:

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

Преобразуйте метод перевода:

.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

Попробуйте это в CSS div:

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

Более сложные макеты, требующие различного количества столбцов для разрешения экрана (например, 2 строки для -xs, 3 для -sm и 4 для -md и т. Д.), Требуют более сложного анализа, но для простой страницы с -xs сложены и -см и больше в строках, это отлично работает.

После принятого ответа, если вы не хотите настраивать разметку, для разделения проблем или просто потому, что вы используете 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 Link

Возможно, вам придется изменить высоту (в частности, на .v-center) и удалить / изменить раздел div[class*='col-']для ваших нужд.

Я столкнулся с этой же проблемой. В моем случае я не знал высоту внешнего контейнера, но вот как я это исправил:

Сначала установите высоту для ваших htmlи bodyэлементов , так что они 100%. Это важно! Без этого htmlи 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>

Если вы используете версию Bootstrap Less и сами компилируете в 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-файл:

@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в rowdiv. Вам больше не нужно изменять свой контент 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>

Источник: Flex · Bootstrap

Хорошо, случайно я смешал несколько решений, и теперь, наконец, это работает для моего макета, где я попытался создать таблицу 3х3 с колонками Bootstrap с наименьшим разрешением.

/* 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, чтобы узнать больше.

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 применяют стиль к div как float: left.

Мне пришлось применить стиль к элементам div, например style = "Float: none", и все мои элементы div начали выравниваться по вертикали. Вот рабочий пример:

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

JsFiddle Link

На тот случай, если кто-то захочет прочитать больше о свойстве float:

W3Schools - Поплавок