Bootstrap: как изменить ширину контейнера?

127

Я использовал Twitter Bootstrap для разработки веб-сайта с фиксированным классом контейнера, но теперь клиент хочет, чтобы ширина веб-сайта составляла 1000 пикселей, а не 1170 пикселей. Я не использую файлы .less.

Есть ли быстрый способ исправить это?

twitter-bootstrap Алекс
источник
Обратитесь к ответу здесь , я думаю, ваша проблема будет решена скриптом только для фиксированного доступа в этом ответе.
прем
@prem, tx, но я не понимаю примера, поскольку он не использует ни один из классов начальной загрузки, таких как span или контейнер. Все, что я думаю, мне нужно для этого проекта, - это установить максимум контейнера на 940 пикселей с помощью адаптивного загрузчика.
Alex

Ответы:

76

Перейдите в раздел « Настройка » на сайте Bootstrap и выберите нужный размер. Вам нужно будет установить @gridColumnWidthи @gridGutterWidthпеременные.

Например: @gridColumnWidth = 65pxи @gridGutterWidth = 20pxрезультаты на 1000pxмакете.

Тогда скачайте его.

albertedevigo
источник
невозможно достичь точного контейнера 1000 пикселей, изменив переменные gridColumnWidth и gridGutterWidth ... потому что (12 * (gridColumnWidth) + 12 (gridGutterWidth)) не равно 1000. И поэтому только я дал это решение. Это правильно?
Прем
15
Теоретически существует бесконечное количество комбинаций, соответствующих 1000 пикселей. Пример: 12 * 65 + 11 * 20 = 1000 (между столбцами всего 11 желобов).
albertedevigo
да! я действительно не узнал простую вещь ... в любом случае ваше решение было подходящим.
Прем
Спасибо за ваш пост, он был полезен;) Замечание: на практике было бы ровно 7 решений, использующих полные пиксели для ширины 1000 пикселей. (ширина столбца 10, 21, 32, 43, 54, 65 и 76)
dfherr
@dfherr Я не знаю, что именно вы имеете в виду, когда говорите «практически», но имейте в виду, что CSS поддерживает десятичные значения для пикселей. Следовательно, существует бесконечное множество решений. w3.org/TR/CSS21/syndata.html#length-units
albertedevigo
232

Вот решение:

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

Преимущество этого по сравнению с настройкой Bootstrap, как в ответе @ Bastardo , заключается в том, что он не меняет файл Bootstrap. Например, при использовании CDN вы все равно можете загрузить большую часть Bootstrap из CDN.

mcbjam
источник
10
В большинстве ответов CDN игнорируется. Ваш ответ - прекрасное решение.
Чарльз Уотсон,
2
Это идеально подходит для людей, использующих CDN. Изменение LESS (когда прибывает 4, SASS) во время сборки идеально подходит для людей, размещающих собственный CSS Bootstrap. Однако изменение пользовательского LESS (или SASS), импортированного после предоставленного, означает, что вы можете обновить базовый LESS без (обычно) выполнения различий.
Грег Петтит
2
Я знаю, что это действительно поздно, но, учитывая, что контейнеры, как правило, теперь больше, если вы добавите width: auto в приведенный выше код, вы можете сделать контейнеры больше, чем их максимум 1170.
Рик Колдер
Это то, что я искал. Спасибо.
tedebus
20

Вы привязываете один за спиной, говоря, что не будете использовать файлы LESS. Я создал свою первую тему Twitter Bootstrap, используя 2.0, и все сделал с помощью CSS - создал файл override.css. На то, чтобы все заработало, потребовались дни.

Теперь у нас 3.0. Позвольте мне заверить вас, что для изучения LESS требуется меньше времени, что довольно просто, если вам комфортно с CSS, чем выполнение всех этих безумных переопределений CSS. Внести изменения, подобные тем, которые вы хотите, совсем несложно.

В Bootstrap 3.0 класс контейнера контролирует ширину, и все содержащиеся в нем стили настраиваются для заполнения контейнера. Переменные ширины контейнера находятся в нижней части файла variables.less.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

На некоторых сайтах либо недостаточно контента, чтобы заполнить дисплей 1020, либо вам нужна более узкая рамка по эстетическим причинам. Поскольку BS использует сетку из 12 столбцов, я использую кратное число, например 960.

Бастардо Сусио
источник
4
Работает, но: имена переменных есть @container-sm, @container-mdи @container-lg(сейчас)
Андреас Долк
1
@Bastardo nice name +1
Ömer An
18

@mcbjam уже дал этот ответ, но вот еще немного объяснений.

Вы можете легко внести изменения, используя медиа-запрос в вашем файле CSS, не загружая BS. Я только что это сделал, и это прекрасно работает.

Значение «min-width» медиа-запроса сообщает CSS, что нужно изменить ширину вашего контейнера на 1000 пикселей только на экранах больше 1200 пикселей (или любой другой ширины, которую вы хотите включить туда). Это сохраняет отзывчивость вашего сайта, поэтому, когда размер экрана становится ниже этого значения (меньший монитор, планшет, смартфон и т. Д.), Ваш сайт все равно будет адаптироваться к экранам меньшего размера.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}
Джефф Швартинг
источник
13

Для bootstrap 4, если вы используете Sass, вот переменная для редактирования

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Чтобы переопределить эту переменную, я объявил $ container-max-widths без! Default в моем файле .sass перед импортом начальной загрузки.

Примечание: мне нужно было только изменить значение xl, поэтому я не думал о точках останова.

Кайдзоку Гамбаре
источник
12

Установите свой собственный класс контейнера содержимого со свойством ширины 1000 пикселей, а затем используйте контейнер-жидкость вместо контейнера.

Работает, но может быть не лучшим решением.

Geo
источник
6

Используйте селектор оболочки и создайте контейнер со 100% шириной внутри этой оболочки, чтобы инкапсулировать всю страницу.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Теперь максимальная ширина установлена ​​на 1000 пикселей, и вам не нужно меньше или sass.

Ларри Джадд
источник
0

Размеры контейнера

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

в разделе Размеры контейнеров измените 1140на970

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

спасибо за вашу поправку. ссылка для настройки начальной загрузки: https://getbootstrap.com/docs/3.4/customize/

Со Санто
источник
-3

Добавьте этот фрагмент CSS в свой стиль CSS. Лучше добавить это после добавления файла начальной загрузки css, чтобы перезаписать его. 

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`
Мээндра
источник