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

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


containers twitter-bootstrap 960.gs
person Marco Gurnari    schedule 20.12.2012    source источник
comment
Вы используете бутстрап 2 или бутстрап 3?   -  person teewuane    schedule 23.11.2013

Ответы (5)


arrow_upward
5
arrow_downward

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

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

  • Перейдите по адресу http://twitter.github.com/bootstrap/customize.html.
  • В разделе «Реагирование» снимите флажок «Большие рабочие столы (> 1200 пикселей)».
  • В нижней части страницы нажмите «Настроить и загрузить», чтобы получить свой собственный загрузчик.
person hajpoj    schedule 20.12.2012
comment
Я не понял, потому что, если я настрою загрузку, как вы говорите, у меня не загружается документ bootsrap responsive. Это нормально? - person Marco Gurnari; 21.12.2012
comment
Да. все хорошо. адаптивные части добавляются в файлы bootstrap.css и bootstrap.min.css. Если вы замените все эти файлы всеми старыми файлами, которые у вас были, вы должны получить желаемый результат. - person hajpoj; 21.12.2012
comment
Вы очень любезны мне объяснить, но видимо не работает :) Подставляю файл скачал bootsrap а на самом деле размер контейнера изменен на 960px Но сайт уже не отвечает еще раз спасибо - person Marco Gurnari; 21.12.2012
comment
это странно ...... Другой вариант - иметь свои старые файлы и просто удалить все, что содержится в @media (min-width: 1200px), из загрузочных файлов и CSS-файлов, реагирующих на загрузку. Я сам не пробовал настраивать загрузочную загрузку и предполагал, что это будет работать нормально. , но я думаю, что нет. - person hajpoj; 21.12.2012

arrow_upward
9
arrow_downward

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

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

а также

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

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

person calofanas    schedule 21.11.2013

arrow_upward
1
arrow_downward

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

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

.container, .container-fluid{
 width: 960px !important;
}
person Surinder ツ    schedule 21.12.2012

arrow_upward
0
arrow_downward

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

  1. измените @container-lg с ((1140px + @grid-gutter-width)) на ((940px + @grid-gutter-width)).
  2. измените @grid-gutter-width с 30 пикселей на 20 пикселей.

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

person Henry Neo    schedule 14.01.2014

arrow_upward
0
arrow_downward

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

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

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

person Yura Loginov    schedule 15.01.2015