Создание двухколоночного полноэкранного макета в Bootstrap 3

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для того чтобы колонки в Bootstrap 3 вели себя так, словно растягиваются на всю высоту, нужно установить высоту в 100% для html, body, .container-fluid, .row и непосредственно для колонок. Задайте для этого класс .full-height и добавьте его на нужные вам колонки, как показано ниже:

HTML

Скопировать код

<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>

Кинга Идем в IT: пошаговый план для смены профессии

Создание мобильно-адаптивных шаблонов

Адаптивное поведение колонок необходимо для их корректного отображения на различных устройствах. Для этого в Bootstrap 3 предусмотрено использование сетки. Вы можете настроить адаптивность колонок для экранов меньших размеров с помощью медиа-запросов:

CSS

Скопировать код

@media (max-width: 991px) {
  .full-height {
    height: auto;
  }
}

Применение метода отображения таблицы

Если вам требуется поддержка старых браузеров, таких как IE8+, можно использовать следующий подход, который соответствует методу отображения HTML-таблиц:

CSS

Скопировать код

.container-table { display: table; width: 100%; height: 100%; }
.row-table { display: table-row; }
.col-table { display: table-cell; vertical-align: top; }

Соответственно, в вашей разметке это будет выглядеть так:

HTML

Скопировать код

<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:

CSS

Скопировать код

.row-flex { 
  display: flex; 
  flex-wrap: wrap; 
}
.col-flex { 
  flex: 1;
}

Соответственно, в HTML-коде это будет выглядеть так:

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-правило для высоты, и ваши башни вознесутся к небу:

CSS

Скопировать код

.height-100 {
  height: 100%;
}

Итак, башни устремляются к звездам:

🔲🔳 
🔲🔳  <- Теперь они вырастают до звёзд!
🔲🔳 
🏢    <- Надёжное основание Bootstrap `row`

Настройка пропорций столбцов

Для настройки пропорций столбцов используйте медиа-запросы:

CSS

Скопировать код

@media (min-width: 992px) {
  .col-md-4 { height: 100%; }
  .col-md-8 { height: 100%; }
}

И соответствующую HTML-разметку:

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.

Свежие материалы

Как выбрать инструменты для тестирования сайтов

6 сентября 2024

Как установить и настроить Swift на Linux

6 сентября 2024

Мета-теги: как правильно использовать

6 сентября 2024