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

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

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

@media (минимальная ширина: 768 пикселей) { .container { максимальная ширина: 750 пикселей; } }

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

12 x 60 = 720 пикселей для столбцов и 11 x 20 = 220 пикселей.

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

@ColumnWidth "нет"

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

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

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

В 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

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

Откройте variable.less и найдите // точки останова медиа-запросов.

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

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

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

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

Вставьте это в свой пользовательский файл css:

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

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

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

@media (минимальная ширина: 1200 пикселей) { .container { ширина: 970 пикселей !важно; } }