Bootstrap 3 - установить ширину контейнера до 940px максимум для настольных компьютеров?

Я добавляю совершенно новый раздел на сайт, используя Twitter Bootstrap 3, однако контейнер не может быть шире, чем 940px в общей сложности для Desktop, поскольку он выкинет Header и Footer {includes}.

Таким образом, 940px работает на 12 x 60 = 720px для столбцов и 11 x 20 = 220px для желобов. Достаточно справедливо, но как вы вводите их в Bootstrap 3, поскольку в разделе "Настройка" есть поле "no" @ColumnWidth/setting?

Я попытался установить @container-lg-desktop и @container-desktop как 940px, но он не работает.

Ответ 1

В первую очередь рассмотрим Малую сетку, см. http://getbootstrap.com/css/#grid-options. Максимальная ширина контейнера 750 пикселей, может быть, мала для вас (также читайте: Почему Bootstrap 3 заставляет ширину контейнера определенным размерам?)

При использовании Малой сетки используйте медиа-запросы для установки ширины максимального контейнера:

@media (min-width: 768px) {.container { max-width: 750px; } }

Второй также прочитайте этот вопрос: Bootstrap 3 - 940px width grid?, возможно дублировать?

12 x 60 = 720px для столбцов и 11 x 20 = 220px

также будет желоб 20px с обеих сторон сетки, поэтому 220 + 720 + 40 составляет 980px

есть "нет" @ColumnWidth

Ширина столбцов будет вычисляться динамически на основе ваших настроек в переменных. вы можете установить @grid-columns и @grid-gutter-width. Ширина столбца будет установлена в процентах через grid.less в mixins.less:

.calc-grid(@index, @class, @type) when (@type = width) {
  [email protected]{class}[email protected]{index} {
    width: percentage((@index / @grid-columns));
  }
}

Обновление Установите @grid-gutter-width в 20px;, @container-desktop: 940px;, @container-large-desktop: @container-desktop и перекомпилируйте бутстрап.

Ответ 2

В Bootstrap 3 существует гораздо более легкое решение (IMO), которое не требует компиляции каких-либо пользовательских LESS. Вам просто нужно использовать каскад в "Каскадные таблицы стилей".

Настройте загрузку CSS так...

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />

Где /css/custom.css - ваши уникальные определения стиля. Внутри этого файла добавьте следующее определение...

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

Это приведет к переопределению установки Bootstrap по умолчанию width: 1170px, когда область просмотра составляет 1200 пикселей или больше.

Протестировано в Bootstrap 3.0.2

Ответ 3

Лучший вариант - использовать исходную версию bootstrap LESS (получить ее из github).

Откройте переменные .less и найдите//контрольные точки запросов Media

Найдите этот код и измените значение точки останова:

// Large screen / wide desktop
@screen-lg:                  1200px; // change this
@screen-lg-desktop:          @screen-lg;

Измените его на 9999px, например, и это предотвратит достижение точки останова, поэтому ваш сайт будет всегда загружать предыдущий медиа-запрос с контейнером 940px

Ответ 4

Если вы не хотите компилировать bootstrap, скопируйте следующее и вставьте его в свой собственный файл css. Не рекомендуется менять исходный загрузочный файл css. Кроме того, вы не сможете изменить исходный CSS-код начальной загрузки, если вы загружаете его из cdn.

Вставьте это в свой собственный файл css:

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

Я устанавливаю свой контейнер на 960 пикселей для всего, что может его разместить, и сохраняя размеры остальных носителей по умолчанию. Вы можете установить его на 940px для этой проблемы.

Ответ 5

Если if не работает, используйте "! Important"

@media (min-width: 1200px) {.container { ширина: 970px ! important;} }