Установка максимальной ширины тела с помощью Bootstrap
Автор вопроса: Olly FОтветов: 5
Я создаю свой первый сайт с помощью Twitter Bootstrap и экспериментирую с плавными макетами. Я сделал свой контейнер плавным, теперь содержимое внутри занимает всю ширину страницы и адаптируется по мере изменения размера браузера.
Дизайн, над которым я работаю, был создан для максимальной ширины ~ 950 пикселей.
Я проверил variables.less и responsive.less, а также документацию Bootstrap; Я не совсем понимаю, как это сделать.
Я также пробовал добавить в свой style.css следующее:
body {
max-width: 950px;
}
ваше правило css работает, что с ним не так? демонстрация Andres Ilich 16.03.2012
В порядке. Повторная попытка. Раньше он не работал, но это могло быть связано с некоторыми проблемами, которые у меня возникли с LESS / Espresso / Codekit. Мои файлы LESS некорректно компилируются. Однако теперь, когда это работает, body выравнивается по левому краю, а не по центру, как раньше. Какие-либо предложения? Я пробовал установить margin на auto для левого и правого. Olly F 16.03.2012
@OllyF Подождите, вы хотите, чтобы ваш контейнер был шириной 950 пикселей, а не весь документ? Я сбит с толку, по умолчанию контейнер, не являющийся жидким, имеет ширину 940 пикселей, поэтому он ниже вашего ограничения. Andres Ilich 16.03.2012
Насколько я понимаю, лучше, если body будет иметь max-width, на всякий случай, если я захочу сделать что-то вне контейнера. В общем, если отбросить это, я имею дело с контейнером для жидкости. Когда я устанавливаю свой контейнер на жидкость, он расширяется на всю ширину тела. Вот почему я пытаюсь установить максимальную ширину тела. Olly F 16.03.2012
@OllyF просто удалите соответствующий медиа-запрос, который имеет дело с недопустимой шириной, и все должно быть в порядке, или вместо этого используйте фиксированный контейнер. Andres Ilich 16.03.2012
Я не уверен, что понимаю, как определить или обработать соответствующий медиа-запрос. Я знаю, что он будет в responseive.less. Я не знаю, что ищу и что с этим делать. Olly F 16.03.2012
Создайте свой собственный файл less в качестве основного файла less (например, bootstrap.less).
Импортируйте все нужные файлы без начальной загрузки. (в этом случае вам просто нужно Импортировать все менее отзывчивые файлы, кроме responsive-1200px-min.less)
Если вам нужно что-то изменить в исходном файле bootstrap less, вам просто нужно написать свой собственный less, чтобы перезаписать код bootstrap less. (Просто не забудьте указать меньше кода / файла после @import { /* bootstrap's less file */ };).
Исходный
У меня точно такая же проблема. Вот как я это исправил.
Найдите медиа-запрос:
@media (max-width:1200px) ...
Убери это. (Я имею в виду все это, а не только @media (max-width:1200px))
Поскольку ширина Bootstrap по умолчанию составляет 940 пикселей, вам не нужно ничего делать.
Если вы хотите иметь свой собственный max-width, просто измените правило CSS в медиа-запросе, которое соответствует вашей желаемой ширине.
Ответ 2 · рейтинг 179 · jcg
Вам не нужно изменять адаптивность к начальной загрузке, удаляя @media (max-width:1200px) ...
У моего приложения max-width 1600 пикселей. Вот как это сработало для меня:
Создайте 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 · рейтинг 8 · Henry
В responseive.less вы можете закомментировать строку, импортирующую responseive-1200px-min.less.
// Large desktops
@import "responsive-1200px-min.less";
Вот так:
// Large desktops
// @import "responsive-1200px-min.less";
Ответ 4 · рейтинг 1 · chech
К сожалению, ничего из вышеперечисленного не решило для меня проблему.
Я не хотел редактировать bootstrap-responseive.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 · рейтинг 1 · Celdor
Не знаю, указывалось ли здесь на это. Параметры ширины .container должны быть установлены на веб-сайте Bootstrap. Мне лично не нужно было ничего редактировать или трогать что-либо в файлах CSS, чтобы настроить свой .container размер, который составляет 1600 пикселей. На вкладке "Настройка" есть три раздела, отвечающих за мультимедиа и отзывчивость Интернета:
Точки останова медиа-запросов
Сетка
Размеры контейнера
Помимо точек останова медиа-запросов, на которые, как я полагаю, ссылается большинство людей, я также изменил @container-desktop на (1130px + @grid-gutter-width) и @container-large-desktop на (1530px + @grid-gutter-width). Теперь .container изменяет свою ширину, если мой браузер масштабируется до ~ 1600 пикселей и ~ 1200 пикселей. Надеюсь, это поможет.
