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

Question

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

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

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

660 7

twitter-bootstrap

7 ответов:

Comments

Ничего не найдено.

albertedevigo · Accepted Answer · 2014-06-17 01:54:47

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

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

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

mcbjam · Accepted Answer · 2017-05-23 15:34:48

вот решение :
@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}
преимущество этого, по сравнению с настройкой Bootstrap, как в @Бастардо это!--5--> ответ, заключается в том, что он не изменяет файл начальной загрузки. Например, если вы используете CDN, вы все равно можете загрузить большую часть Bootstrap из CDN.

Bastardo Sucio · Accepted Answer · 2015-08-17 00:47:42

вы связываете один был за вашей спиной, говоря, что вы не будете использовать меньше файлов. Я построил свою первую тему Twitter Bootstrap с помощью 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.

Jeff Schwarting · Accepted Answer · 2015-04-07 20:10:36

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

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

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

Geo · Accepted Answer · 2015-02-27 12:33:01

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

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

Larry Judd · Accepted Answer · 2015-11-15 08:37:23

используйте селектор оболочки и создайте контейнер, который имеет ширину 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.

Mahendra · Accepted Answer · 2016-04-23 15:43:20

добавьте эти части CSS в свой стиль css. Лучше добавить это после того, как файл css bootstrap будет добавлен, чтобы перезаписать то же самое.
html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`