Как Выровнять высоту колонок в bootstrap?

Question

[Kaunov_ivan]

Уже не первій раз сталкиваюсь с єтой проблемой. Но не могу найти нормально решения.
У меня есть две колонки - в одной картинка, а другой текст или список. Например:

<div class="row">
			<div class="col-md-3">
				<div class="logo">
					<a href="index.html">
						<img src="images/image-1.png">
					</a>
				</div>
			</div>
			<div class="col-md-9">
				<ul class="nav nav-pills nav-justified">
  					<li><a href="zakaz.html">Заказ</a></li>
  					<li><a href="blog.html">Блог</a></li>
  					<li><a href="contacts.html">Контакты</a></li>
				</ul>
			</div>
		</div>

Задача стоит такая - опустить список(меню) до низа первой колонки - логотипа

Answer 1

[MhMadHamster]

codepen.io/anon/pen/XbPEpJ
в приведенном примере есть 2 способа решения данной проблемы, учтите что при использовании inline-block необходим комментарий на строчке 8, чтобы не было лишнего пространства между колонками
для того чтобы посмотреть в действии второй вариант необходимо добавить row класс va-bottom-flex и убрать у колонок класс va-bottom конечно же, учтите что не все браузеры поддерживают flexbox

Answer 2

[kiberlain]

на самом деле вёрстка флоатихся колонок одинаковой высоты не такая простая задача как кажется. Раньше её решали так. В наши дни это элементарно делается при помощи свойства flex. Вам же скорее всего придётся имитировать таблицу, задать родительскому контейнеру display: table-row, а col-md-3 и col-md-9 - display: table-cell.
Но обычно просто задают высоту колонок

Answer 3

[Максим Тимофеев]

Самый простой способ это использовать таблицу во второй ячейке, а в ней можно делать вертикальное выравнивание vertical-align:bottom
Еще можно добавить див во вторую колонку, который будет придавливать к низу Ваш список.