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

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

Таким образом, 940px работает при 12 x 60 = 720px для столбцов и 11 x 20 = 220px для желобов. Справедливо, но как вы вводите их в Bootstrap 3, так как в разделе Customize нет поля / параметра @ColumnWidth 'no'?

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

Ответы на вопрос(5)

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

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

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

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

Решение Вопроса

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

При использовании Малой сетки используйте медиазапросы, чтобы установить максимальную ширину контейнера:

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

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

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

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

нет «@ColumnWidth»

Ширина столбцов будет рассчитываться динамически на основе ваших настроек в variables.less. Вы могли бы установить@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 и перекомпилируйте начальную загрузку.

 ubique19 окт. 2013 г., 20:54
Я уже пытался установить для параметра «контейнер-рабочий стол» и «контейнер-большой рабочий стол» значение 940 пикселей - и это не работает. Интересно, влияют ли «контрольные точки медиазапросов»?
 Bass Jobsen18 окт. 2013 г., 19:09
см. обновление выше
 Bass Jobsen19 окт. 2013 г., 20:01
да, вы должны установить@container-large-desktop к тому же значению, что и `@ container-desktop`, к 940px или@container-large-desktop: @container-desktop, Что значит так же, как@container-large-desktop = @container-desktop
 ubique19 окт. 2013 г., 15:49
Привет - немного запутался здесь !? «Контейнер-рабочий стол» написан дважды: один со значением 940 пикселей, а другой без?
 ubique18 окт. 2013 г., 16:53
Малая сетка слишком мала для этого проекта, так как для достижения 940px требуется столько же, сколько для остальной части сайта. Ваша ссылка на «дубликат» - я пробовал это до того, как опубликовать свой вопрос, и это не решило проблему? Спасибо.

которое не требует компиляции каких-либо пользовательских 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

 James27 февр. 2016 г., 21:08
Я думаю, что должно быть "max-width: 970px;"
 chiffa22 февр. 2016 г., 03:07
Как мне это сделать, когда мне нужно объявить все в одном файле CSS, например, внутри CodePen? Кажется, это не работает, даже с!important тег.
 chiffa22 февр. 2016 г., 16:51
Я проверил это в CodePen без успеха, к сожалению. Я постараюсь разобраться, спасибо за ваш ответ.
 Frank Koehl22 февр. 2016 г., 16:46
Если все существует в одном файле, я полагаю, что вы можете заставить его работать, просто убедившись, что определения, которые я изложил выше дляcustom.css в конечном итоге наочень низ файла. Это должно гарантировать, что они будут применены последними. Не проверено, YMMV.
 Frank Koehl07 мар. 2016 г., 16:59
@ Джеймс, нет, не должно -github.com/twbs/bootstrap/blob/master/dist/css/...

грузки (получите ее с github).

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

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

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

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

@media (min-width: 1200px) {.container {width: 970px!важный; }}

Ваш ответ на вопрос