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

126

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

Чи існує швидкий спосіб виправити це?

twitter-bootstrap

— алекс
джерело

Зверніться до відповіді тут , я думаю, що ваша проблема буде вирішена фіксацією лише у цій відповіді.

— прем.

@prem, tx, але я не отримую приклад, оскільки він не використовує жодного з класів завантаження, наприклад, span або контейнер. Я думаю, що мені потрібно для цього проекту - встановити максимум контейнера до 940px за допомогою чуйного завантажувального пристрою.

— alex

75

Перейдіть у розділ Налаштувати на сайті Bootstrap і виберіть потрібний розмір. Вам доведеться встановити @gridColumnWidthі @gridGutterWidthзмінні.

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

Потім завантажте його.

— альбертедевіго
джерело

не можна досягти точного контейнера 1000px шляхом зміни змінних 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

231

Ось таке рішення:

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

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

— mcbjam
джерело

10

Більшість відповідей нехтують CDN. Ваша відповідь - ідеальне рішення.

— Чарльз Уотсон

2

Він ідеально підходить для людей, які використовують CDN. Модифікація менше (коли 4 прибувають, SASS) під час збирання ідеально підходить для людей, що розміщують свій власний CSS Bootstrap. Однак, змінивши спеціальний менший (або SASS) імпортований після наданого означає, що ви можете оновити базовий LESS, не (зазвичай) робити різницю.

— Грег Петтіт

2

Я знаю, що це справді пізно, але дані контейнери, як правило, більше, якщо додати ширину: auto до наведеного вище коду, ви можете зробити контейнери більшими, ніж макс.

— Рік Калдер

Це те, що я шукав. Дякую.

— тедебус

20

Ви зав'язуєте одного, хто мав за спиною, кажучи, що ви не будете використовувати МАЛІ файли. Я створив свою першу тему Twitter Bootstrap за допомогою 2.0, і я все зробив у CSS - створивши файл override.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.

— Бастардо Сусіо
джерело

4

Працює, але: назви змінних є @container-sm, @container-mdі @container-lg(зараз)

— Андреас Долк

1

@Bastardo приємне ім'я +1

— Ömer,

18

@mcbjam вже дав цю відповідь, але ось трохи більше пояснень.

Ви можете легко внести зміни, використовуючи медіа-запит у файлі CSS, не завантажуючи BS. Я щойно це зробив, і це прекрасно працює.

Значення "min-width" медіа-запиту дозволить CSS змінити ширину вашого контейнера на 1000px лише на екранах більше 1200px (або будь-яку ширину, яку ви бажаєте туди включити). Це зберігає чуйність вашого веб-сайту, тому коли розмір екрана підскочить нижче цієї величини (менший монітор, планшет, смартфон тощо), ваш сайт все одно буде коригуватися для розміщення на менших екранах.

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

— Джефф Швартінг
джерело

13

Для завантажувальної програми 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;

Щоб замінити цю змінну, я оголосив $ контейнер-макс-ширину без значень!! У своєму файлі .sass перед імпортом завантажувальної програми.

Примітка. Мені потрібно було лише змінити значення xl, тому я не хвилювався думати про точки прориву.

— Кайзоку Гамбаре
джерело

12

Встановіть власний клас контейнера вмісту з властивістю ширини 1000 пікселів, а потім використовуйте клас завантаження контейнера-рідина замість контейнера.

Працює, але може бути не найкращим рішенням.

— Гео
джерело

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-файлу bootstrap, щоб перезаписати те саме.

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

— Махендра
джерело