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

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

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

Ответ 1

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

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

Затем загрузите его.

Ответ 2

Вот решение:

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

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

Ответ 3

Вы связываете одного за спиной, говоря, что вы не будете использовать файлы 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

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

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

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

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

Ответ 5

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

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

Ответ 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 пикселей, и вам не меньше или меньше.

Ответ 7

Для начальной загрузки 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, поэтому я не хотел думать о точках останова.

Ответ 8

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

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

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

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

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

Ответ 9

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

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`