Создание макета шириной 100% в Bootstrap 3: решение

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

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

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <!-- Вау! Теперь я расширен до полной ширины! 🤘 -->
    </div>
  </div>
</div>

Обязательно включите в разметку ссылки на CSS/JS и библиотеку jQuery. Такое приемлемое изменение позволит вашему контенту занять всю доступную ширину экрана.

Учтите, использование .container-fluid доступно начиная с 3.1 версии Bootstrap. Чтобы создать элемент, выходящий за пределы отступов .row, достаточно применить класс col-xs-12 без обратной связи .row, учитывая при этом адаптивные отступы.

Визуализация

Представьте себе великолепную театральную сцену, освещенную в каждом углу:

Обычная сцена: [🔲] <- это блок фиксированного размера

100%-ный шаблон Bootstrap позволяет вашей "сцене" адаптироваться в зависимости от условий:

Раздвижная сцена: [🔳🔳🔳] <- Каждый блок подстраивается, чтобы заполнить все доступное пространство.

Используя сетку Bootstrap, содержимое, подобно актерам на сцене, всегда занимает центральное место:

Актеры: [🎭👥🎭👥]
Сетка: [🔳🔳🔳🔳] <- Сетка адаптируется, предоставляя каждому актеру свое место.

Такая возможность растянуть макет на весь экран улучшает восприятие пользователя, подобно тому, как сцена, освещенная до максимума, очаровывает зрителя.

Управление элементами, растянутыми на полную ширину

Горизонтальное развертывание с использованием .row

Элемент div.row заполняет весь экран, обеспечивая максимальное горизонтальное развертывание. Используйте его для уменьшения отступов и создания непрерывного зрелища:

<div class="container-fluid">
  <div class="row m-0">
    <!-- Здесь все ваши полномочия!💪 -->
  </div>
</div>

Если необходима индивидуальная настройка отступов, то, вероятно, придется изменять CSS. Если того требует ситуация, используйте медиа-запросы для тонкой настройки элеcментов.

Подробнее об этом расскажет наш спикер на видео

Центрирование контента на фоне полной ширины экрана

Для центрирования содержимого используйте комбинацию col-md-offset-4 и col-md-4. Это особенно актуально для больших экранов:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <!-- Внимание! Я центрирован! 🕺 -->
    </div>
  </div>
</div>

Элементы на полную ширину вне сетки

Для элементов, которые должны быть распространены на всю ширину и не привязаны к сетке, не используйте сеточные классы. Разместите такие элементы напрямую в .container-fluid без .row и колонок, чтобы они могли свободно расширяться.

<div class="container-fluid">
  <!-- Я – свободный дух, мне не нужны сеточные классы! 👻 -->
</div>

Адаптивность дизайна

Важно учесть адаптивность вашего макета. Использование специальных мета-тегов поможет корректно отображать макет на различных устройствах. Тестирование на различных устройствах даст возможность довести дизайн до идеала.

Полезные материалы

1. CSS · Bootstrap — Официальная документация Bootstrap 3 по работе с сеткой.
2. CSS · Bootstrap — Использование адаптивных утилит в Bootstrap 3.
3. Изменение цвета навигационной панели в Twitter Bootstrap – Stack Overflow — Пример настройки цвета навигационной панели в Bootstrap.
4. Узкий Jumbotron для Bootstrap — Пример полноширинного шаблона.
5. Урок | DigitalOcean — Подробное руководство по настройке сетки Bootstrap 3.
6. Контейнеры на полную ширину в ограниченных блоках | CSS-Tricks — Приемы работы с CSS для создания полноширинных макетов.
7. Типографика в размерах вьюпорта | CSS-Tricks — Советы по типографике в адаптивных макетах с автоматической корректировкой размера текста в зависимости от размера вьюпорта.