Bootstrap – Как создать фиксированный макет шириной 960px?

В этой статье разберём как можно создать макет строго определённой ширины с помощью классов сетки Bootstrap 3 или 4 версии.

Почему 960px

Некоторое время назад, ещё до появления мониторов с высоким разрешением, смартфонов и планшетов, ширина экранов на которых осуществлялся просмотр сайтов имело разрешение 1024 - 1280 пикселей.

Данная ширина (960px) – это просто некоторая комфортная величина для просмотра сайтов на экранах с таким разрешением (1024 – 1280px).

Кроме этого, выбор именно этого значения объясняется ещё тем, что оно очень хорошо делится на различные числа (например, на 12). Это позволяет при проектировании макета строить ячейки, которые будут иметь в качестве значения ширины целое количество пикселей. Например, при создании макета 3-6-3 ячейки будут иметь соответственно значения 240px, 480px и 240px.

Создание фиксированного макета в Bootstrap 3 и 4

Для создания такого макета достаточно установить адаптивно-резиновому обёрточному контейнеру с помощью CSS необходимую ширину:

.container-fluid { 
  width: 960px !important; 
}

После этого можно переходить к разработке макета с помощью классов сетки Bootstrap. Для установки ширины адаптивным блокам в данном случае достаточно использовать классы col-xs-{количество_колонок} (в Bootstrap 3) и col-{количество_колонок} (в Bootstrap 4).

Пример фиксированного макета, основная часть которого состоит из 3 ячеек (nav, main и aside):

/* CSS */  
.container-fluid { 
  width: 960px !important; 
}

<!-- HTML Bootstrap 3 -->
<header class="header">
  <div class="container-fluid">...</div>
</header>
<div class="container-fluid">
  <div class="row">
    <nav class="col-xs-2 navigation">...</nav>
    <main class="col-xs-7 main">...</main>
    <aside class="col-xs-3 aside">...</aside>
  </div>
</div>
<footer class="footer">
  <div class="container-fluid">...</div>
</footer>

/* CSS */  
.container-fluid { 
  width: 960px !important; 
}

<!-- HTML Bootstrap 4 -->
<header class="header">
  <div class="container-fluid">...</div>
</header>
<div class="container-fluid">
  <div class="row">
    <nav class="col-2 navigation">...</nav>
    <main class="col-7 main">...</main>
    <aside class="col-3 aside">...</aside>
  </div>
</div>
<footer class="footer">
  <div class="container-fluid">...</div>
</footer>