Получить профессию в Skypro
Создание двухколоночного полноэкранного макета в Bootstrap 3
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для того чтобы колонки в Bootstrap 3 вели себя так, словно растягиваются на всю высоту, нужно установить высоту в 100% для html, body, .container-fluid, .row и непосредственно для колонок. Задайте для этого класс .full-height и добавьте его на нужные вам колонки, как показано ниже:
<style>
html, body, .container-fluid, .row, .full-height {
height: 100%;
}
</style>
<div class="container-fluid">
<div class="row full-height">
<div class="col-md-6 full-height" style="background-color: #f8f9fa;">
<!-- Здесь будет содержимое левой колонки -->
</div>
<div class="col-md-6 full-height" style="background-color: #e9ecef;">
<!-- А здесь — содержимое правой колонки -->
</div>
</div>
</div>
Создание мобильно-адаптивных шаблонов
Адаптивное поведение колонок необходимо для их корректного отображения на различных устройствах. Для этого в Bootstrap 3 предусмотрено использование сетки. Вы можете настроить адаптивность колонок для экранов меньших размеров с помощью медиа-запросов:
@media (max-width: 991px) {
.full-height {
height: auto;
}
}Применение метода отображения таблицы
Если вам требуется поддержка старых браузеров, таких как IE8+, можно использовать следующий подход, который соответствует методу отображения HTML-таблиц:
.container-table { display: table; width: 100%; height: 100%; }
.row-table { display: table-row; }
.col-table { display: table-cell; vertical-align: top; }Соответственно, в вашей разметке это будет выглядеть так:
<div class="container-fluid container-table">
<div class="row row-table full-height">
<div class="col-md-6 col-table" style="background-color: #f8f9fa;">
<!-- Содержимое левого столбца -->
</div>
<div class="col-md-6 col-table" style="background-color: #e9ecef;">
<!-- Содержимое правого столбца -->
</div>
</div>
</div>Flexbox как альтернативное решение
Flexbox в Bootstrap 4 значительно упрощает работу с колонками на всю высоту. Однако эту модель вы можете применить и в Bootstrap 3:
.row-flex {
display: flex;
flex-wrap: wrap;
}
.col-flex {
flex: 1;
}Соответственно, в HTML-коде это будет выглядеть так:
<div class="container-fluid">
<div class="row row-flex">
<div class="col-md-6 col-flex" style="background-color: #f8f9fa;">
<!-- Содержимое первой flex-колонки -->
</div>
<div class="col-md-6 col-flex" style="background-color: #e9ecef;">
<!-- Содержимое второй flex-колонки -->
</div>
</div>
</div>Визуализация
Представьте макет Bootstrap в виде двух башен:
🏗️ Создаем столбцы на всю высоту в Bootstrap 3 🏗️
Башня A (🔲): Пространство для основного содержимого
Башня B (🔳): Зона для боковой панели или навигации
Фундамент: Надежный Bootstrap `row` (🏢)Вам требуется добавить CSS-правило для высоты, и ваши башни вознесутся к небу:
.height-100 {
height: 100%;
}Итак, башни устремляются к звездам:
🔲🔳
🔲🔳 <- Теперь они вырастают до звёзд!
🔲🔳
🏢 <- Надёжное основание Bootstrap `row`Настройка пропорций столбцов
Для настройки пропорций столбцов используйте медиа-запросы:
@media (min-width: 992px) {
.col-md-4 { height: 100%; }
.col-md-8 { height: 100%; }
}И соответствующую HTML-разметку:
<div class="container-fluid">
<div class="row full-height">
<div class="col-md-4" style="background-color: #f8f9fa;">
<!-- Содержимое меньшей колонки -->
</div>
<div class="col-md-8" style="background-color: #e9ecef;">
<!-- Содержимое большей колонки -->
</div>
</div>
</div>Демонстрации
Изучите интерактивные демонстрации на CodePen или Bootply, чтобы лучше понять, как работают эти методы в Bootstrap 3.
Полезные материалы
- CSS · Bootstrap – официальная документация по сетке Bootstrap 3.
- A Complete Guide to Flexbox | CSS-Tricks – подробное руководство по Flexbox.
- Flexbox – Learn web development | MDN – основы Flexbox на MDN.
- How to Build a Responsive Bootstrap Website | DigitalOcean – руководство по созданию адаптивных сайтов на Bootstrap.
- Bootstrap 3 Full Height Columns CodePen – пример создания колонок на всю высоту в Bootstrap 3 на CodePen.