Один из типичных вопросов, возникающих при работе с фреймворком Bootstrap 3, это вертикальное выравнивание элементов. Вертикальное выравнивание – это процесс установки вертикального положения элемента относительно его окружения.
Ситуация может быть следующей: есть два блока div, один из которых выше другого. Необходимо выровнять их по вертикали. Вот типичный пример кода:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<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">Большой блок</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Меньший блок</div>
</div>
</div>
В данном случае система сеток в Bootstrap использует свойство float: left, а не display:inline-block, поэтому свойство vertical-align не работает.
Попытка решения проблемы с помощью свойства margin-top может казаться логичной, но это не лучшее решение для адаптивного дизайна. При изменении размера окна браузера или на разных устройствах верстка может «поехать».
Лучшим решением будет использование свойств флексбоксов, которые позволяют гибко управлять расположением элементов на странице. Для этого в Bootstrap 3 предусмотрены специальные классы, такие как align-items-center или justify-content-center.
При использовании этих классов, код может выглядеть следующим образом:
<div class="row align-items-center">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Большой блок</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Меньший блок</div>
</div>
</div>
Таким образом, с помощью классов флексбоксов можно легко решить проблему вертикального выравнивания элементов в Bootstrap 3.
Добавить комментарий