Установка максимальной ширины тела с помощью Bootstrap

Создание моего первого сайта с помощью Twitter-бутстрапа и экспериментирование с макетами жидкости. Я установил, что мой контейнер будет жидким, теперь содержимое внутри занимает всю ширину страницы и адаптируется к изменению размера браузера.

Дизайн, над которым я работаю, был создан для максимальной ширины ~ 950px.

Я проверил variables.less и responsive.less, и документацию Bootstrap, я не могу понять, как это сделать. Я также попытался добавить следующее к своему style.css:

body {
    max-width: 950px;
}

Ответы

Ответ 1

Edit

Лучший способ сделать это -

  • создайте свой собственный файл меньше как основной файл меньшего размера (например, bootstrap.less).

  • Импортируйте все загрузочные файлы, которые вам нужны. (в этом случае вам просто нужно импортировать все файлы с меньшим количеством ответов, но реагировать - 1200px-min.less)

  • Если вам нужно изменить что-либо в исходном загрузочном файле меньше, вам просто нужно написать свой собственный меньше, чтобы перезаписать загрузочный код меньше. (Только не забудьте поставить меньше кода/файла после @import {bootstrap less file};).

Оригинал

У меня та же проблема. Вот как я его исправил.

Найдите медиа-запрос.

@media (max-width:1200px) ...

Удалите его. (Я имею в виду все это, а не только @media (max-width:1200px))

Поскольку ширина загрузки Bootstrap по умолчанию равна 940px, вам не нужно ничего делать.

Если вы хотите, чтобы у вас была максимальная ширина, просто измените правило css в запросе на мультимедиа, который соответствует вашей желаемой ширине.

Ответ 2

Вам не нужно модифицировать bootstrap-отзыв, удалив @media (max-width:1200px)...

Мое приложение имеет max-width 1600px. Вот как это сработало для меня:

  • Создайте bootstrap-custom.css - Насколько это возможно, я не хочу переопределять исходный bootstrap css.

  • Внутри bootstrap-custom.css переопределите контейнер-жидкость, включив этот код:

Вот так:

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

Ответ 3

В responsive.less вы можете прокомментировать строку, которая импортирует отзывчивый-1200px-min.less.

// Large desktops

@import "responsive-1200px-min.less";

Так же:

// Large desktops

// @import "responsive-1200px-min.less";

Ответ 4

К сожалению, ни одно из вышеперечисленных проблем не разрешило меня.

Я не хотел редактировать bootstrap-responsive.css, поэтому я пошел простым путем:

  • Создайте css с приоритетом над bootstrap-responsive.css
  • Скопируйте все содержимое @media (min-width: 768px) and (max-width: 979px) (строка 461 с последней версией начальной версии 2.3.1 на сегодня)
  • Вставьте его в свой высокий приоритет css
  • В вашем css поместите @media (min-width: 979px) в том месте, где он сказал @media (min-width: 768px) and (max-width: 979px) раньше. Это устанавливает от 768 до 979 стиль ко всему выше 768.

Что это. Это не оптимально, у вас будет дублированный css, но он работает на 100% отлично!

Ответ 5

Я не знаю, было ли это указано здесь. Настройки для ширины .container должны быть установлены на веб-сайте Bootstrap. Мне лично не нужно было редактировать или касаться чего-либо в файлах CSS, чтобы настроить размер .container размером 1600 пикселей. На вкладке "Настроить" есть три раздела, отвечающие за медиа и отзывчивость сети:

  • Контрольные точки запросов СМИ
  • Сетка системы
  • Размеры контейнера

Помимо контрольных точек запросов Media, на которые я считаю большинство людей, я также изменил @container-desktop на (1130px + @grid-gutter-width) и @container-large-desktop на (1530px + @grid-gutter-width). Теперь .container меняет свою ширину, если мой браузер масштабируется до ~ 1600px и ~ 1200px. Надеюсь, это поможет.