Блоки одинаковой высоты в Bootstrap - из px в rem
Гибкая система колоночной сетки Bootstrap включает 12 колонок. Такая схема позволяет легко выполнять размещение элементов, указывая их ширину в относительных значениях и располагать их в строках. Это может быть применимо к тегам <div>.
При этом неправильно изменять свойства сетки. Она отличается свойством пластичности, как резиновый блок с параметром display: flex. То есть, не стоит делать резиновым и без того уже пластичный элемент. Изначально высоту блока <div> задавать не надо. Она автоматически формируется, следуя из содержимого в контейнере. Если туда ничего не поместить, то будет нулевая высота.
Но иногда необходимо, чтоб блоки были одинаковой высоты, независимо от разницы в их содержимом. В этой ситуации в файле CSS необходимо задать высоту блока в единицах rem.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="cont1">
Содержание блока
</div>
<div class="col-lg-6">
<div class="text">
Содержание на цветном фоне
</div>
</div>
</div>
</div>
</div>
CSS.text {
background-color: #FF0077;
height: блок 'cont1', высота в rem;
}
. cont1{
height: высота блока в единицах rem;
}
Пример создан на Bootstrap 3
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.