Как выбрать контейнер шириной 960px, а не 1200px в Bootstrap

Question

Как выбрать контейнер шириной 960px, а не 1200px в Bootstrap?

Answer 1

Вы хотите сайт с фиксированной шириной? Если так, то просто не включайте bootstrap-responsive.css, Ширина по умолчанию для контейнера фиксированной ширины будет 960px.

В противном случае, если вам все еще нужны адаптивные функции, но нет контейнера 1200px, вам нужно будет настроить загрузочную установку. Для этого:

• Перейдите на http://twitter.github.com/bootstrap/customize.html
• В адаптивном разделе снимите флажок "Большие рабочие столы (>1200 пикселей)"
• Внизу страницы нажмите "настроить и загрузить", чтобы получить свой собственный загрузчик

Answer 2

Bootstrap устанавливает ширину контейнера в 1170 пикселей на экранах шире, чем 1200 пикселей.
Для экранов от 992 до 1200 пикселей ширина контейнера составляет 970 пикселей. Вы можете прочитать больше о сетке бутстрапа здесь
Теперь, если вы хотите установить контейнер на 760px для больших экранов, вам нужно найти его и отредактировать в bootstrap.css или добавить этот код в ваш собственный CSS:

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

а также

@media (min-width: 992px) {
  .container {
    width: 960px;
   }
 }

Надеюсь это поможет

Answer 3

Это работает для меня.

! важный не рекомендуется использовать. но вы можете попробовать.

.container,.container-liquid{
 ширина: 960 пикселей! важно;
}

Answer 4

Если вы используете sass и bootstrap v3.3.1, просто определите эти переменные перед импортом начальной загрузки:

$grid-gutter-width: 20px;
$container-large-desktop: 940px + $grid-gutter-width;

Для получения дополнительной информации, пожалуйста, проверьте исходный файл переменных: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

Answer 5

Для Bootstrap3 вы можете настроить его так, чтобы он по умолчанию получал 960 пикселей ( http://getbootstrap.com/customize/)

1. изменить @ container-lg с ((1140px + @grid-gutter-width)) на ((940px + @grid-gutter-width)).
2. изменить @ grid-gutter-width с 30px до 20px.

затем загрузите свою собственную версию начальной загрузки и используйте ее. Теперь он должен быть 960px по умолчанию.