Как сделать сетку bootstrap под макет шириной 960px

17.06.2017

Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/.

  1. меняем @container-large-desktop с (1140px + @grid-gutter-width) на (940px + @grid-gutter-width).
  2. меняем @grid-gutter-width с 30px на 20px.

Затем скачиваем получившиеся кастомизированные стили Bootstrap и используем на сайте, по умолчанию максимальная ширина контейнера будет 960px.

Если нужна только сетка без ничего лишнего, тогда можно действовать в такой последовательности:

  • переходим на страницу кастомайзера http://getbootstrap.com/customize/
  • в разделе Less files жмем Toggle All (снимаем все галочки), затем отмечаем чекбоксы только Grid system и Responsive utilities
  • в разделе jQuery plugins жмем Toggle All (снимаем все галочки)
  • в разделе Less variables жмем Reset to defaults (убираем все параметры)
  • задаем для @container-large-desktop ширину (940px + @grid-gutter-width).
  • задаем для @grid-gutter-width ширину 20px.
  • В самом низу жмем кнопку Compile and Download и скачиваем архив с сеткой

Выглядеть это будет примерно так:

Как сделать сетку bootstrap под макет шириной 1560px

Но для макета, который должен быть больше чем 1200px этот способ не годится, по тому как тогда после экрана large (lg) будет идти экран medium (md), а нам лучше задать xl (extralarge).
Вот, не знаю, на сколько это правильно, но когда мне нужна была сетка шириной 1560px, то я в стандартную сетку bootstrap после правила для максимальной ширины контейнера

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

добавил свое правило:

 @media (min-width: 1590px) {
  .container {
    width: 1560px;
  }
}

Что это дало:

  • для экранов с разрешением больше 1590px сайт будет шириной 1560px
  • все правила для колонок будут унаследованы у правил для экранов шириной 1200px
  • для экранов меньше 1590px по ширине будет использоваться контейнер шириной 1170px и далее как обычно.

Если кто-то это прочитает и подумает «какое идиотское решение», просьба и мне об этом сообщить, потому как на практике решение вроде бы зарекомендовало себя как вполне пригодное для использования.

Вот, кстати, хорошее видео на эту тему:

Как получить адаптивную сетку Bootstrap нужной ширины

Полезная инфа:

Оставить комментарий