@Kaunov_ivan

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

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

Задача стоит такая - опустить список(меню) до низа первой колонки - логотипа
  • Вопрос задан
  • 16685 просмотров
Решения вопроса 1
MhMadHamster
@MhMadHamster
codepen.io/anon/pen/XbPEpJ
в приведенном примере есть 2 способа решения данной проблемы, учтите что при использовании inline-block необходим комментарий на строчке 8, чтобы не было лишнего пространства между колонками
для того чтобы посмотреть в действии второй вариант необходимо добавить row класс va-bottom-flex и убрать у колонок класс va-bottom конечно же, учтите что не все браузеры поддерживают flexbox
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@kiberlain
на самом деле вёрстка флоатихся колонок одинаковой высоты не такая простая задача как кажется. Раньше её решали так. В наши дни это элементарно делается при помощи свойства flex. Вам же скорее всего придётся имитировать таблицу, задать родительскому контейнеру display: table-row, а col-md-3 и col-md-9 - display: table-cell.
Но обычно просто задают высоту колонок
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Самый простой способ это использовать таблицу во второй ячейке, а в ней можно делать вертикальное выравнивание vertical-align:bottom
Еще можно добавить див во вторую колонку, который будет придавливать к низу Ваш список.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы