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

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

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

93
twitter-bootstrap

7 ответов

перейти к настройка раздел на сайте Bootstrap и выберите размер, который вы предпочитаете. Вам придется установить @gridColumnWidth и @gridGutterWidth переменные.

например: @gridColumnWidth = 65px и @gridGutterWidth = 20px на 1000px макет.

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

67

вот решение :

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

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

148

вы связываете один за спиной, говоря, что вы не будете использовать меньше файлов. Я построил свою первую тему загрузки Twitter с помощью 2.0, и я сделал все в CSS-создании переопределения.файл CSS. Чтобы все работало правильно, требовались дни.

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

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

// 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.

20

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

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

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

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

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

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

7

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

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

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

6

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

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