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

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

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

Я проверил variables.less и responsive.less, а также документацию Bootstrap; Я не совсем понимаю, как это сделать.

Я также пробовал добавить в свой style.css следующее:

body {
    max-width: 950px;
}

html css twitter-bootstrap
person Olly F    schedule 16.03.2012    source источник
comment
ваше правило css работает, что с ним не так? демонстрация   -  person Andres Ilich    schedule 16.03.2012
comment
В порядке. Повторная попытка. Раньше он не работал, но это могло быть связано с некоторыми проблемами, которые у меня возникли с LESS / Espresso / Codekit. Мои файлы LESS некорректно компилируются. Однако теперь, когда это работает, body выравнивается по левому краю, а не по центру, как раньше. Какие-либо предложения? Я пробовал установить margin на auto для левого и правого.   -  person Olly F    schedule 16.03.2012
comment
@OllyF Подождите, вы хотите, чтобы ваш контейнер был шириной 950 пикселей, а не весь документ? Я сбит с толку, по умолчанию контейнер, не являющийся жидким, имеет ширину 940 пикселей, поэтому он ниже вашего ограничения.   -  person Andres Ilich    schedule 16.03.2012
comment
Насколько я понимаю, лучше, если body будет иметь max-width, на всякий случай, если я захочу сделать что-то вне контейнера. В общем, если отбросить это, я имею дело с контейнером для жидкости. Когда я устанавливаю свой контейнер на жидкость, он расширяется на всю ширину тела. Вот почему я пытаюсь установить максимальную ширину тела.   -  person Olly F    schedule 16.03.2012
comment
@OllyF просто удалите соответствующий медиа-запрос, который имеет дело с недопустимой шириной, и все должно быть в порядке, или вместо этого используйте фиксированный контейнер.   -  person Andres Ilich    schedule 16.03.2012
comment
Я не уверен, что понимаю, как определить или обработать соответствующий медиа-запрос. Я знаю, что он будет в responseive.less. Я не знаю, что ищу и что с этим делать.   -  person Olly F    schedule 16.03.2012
comment
@OllyF измените этот медиа-запрос внутри адаптивного CSS до ширины, которую вы ищете: @media (min-width: 768px) and (max-width: 979px) { .. }, в вашем случае будет max-width:950px;.   -  person Andres Ilich    schedule 16.03.2012

Ответы (5)


arrow_upward
26
arrow_downward

Изменить

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

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

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

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

Исходный

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

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

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

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

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

Если вы хотите иметь свой собственный max-width, просто измените правило CSS в медиа-запросе, которое соответствует вашей желаемой ширине.

person maxisam    schedule 05.06.2012
comment
Есть идеи, как это изменить, не изменяя файлы начальной загрузки? Например, есть ли способ изменить это поведение в CSS после включения Bootstrap? - person mdrozdziel; 18.10.2012
comment
У вас может быть свой собственный основной файл less, который включает в себя все ваши собственные файлы less и файлы bootstrap. Ваш пользовательский файл less может перезаписать любые правила в файлах начальной загрузки less. - person maxisam; 18.10.2012
comment
А еще лучше просто переопределите соответствующие переменные вместо фактических стилей (см. Bootstrap / variables.less). - person ebuat3989; 16.08.2013

arrow_upward
179
arrow_downward

Вам не нужно изменять адаптивность к начальной загрузке, удаляя @media (max-width:1200px) ...

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

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

  2. Внутри 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 */
}
person jcg    schedule 03.08.2012
comment
Я изменил .container-fluid на .container (я использую этот класс вместо вашего) и изменил max-width на min-width, и это сработало! :) - person gabrielhpugliese; 18.08.2012
comment
Это не работает, когда вы используете элементы начальной загрузки, такие как панель навигации, ширина которой все еще определяется в @media (max-width: 1200px) - person digout; 14.11.2012
comment
Это работает безупречно! Он имитирует макет Facebook, особенно для панели навигации. Я думаю, это должен быть принятый ответ. - person David Morales; 15.12.2012
comment
Минимум хлопот и максимальный эффект. - person Matt Lacey; 01.02.2013
comment
Параметр margin: auto не требуется (больше с Bootstrap 3). - person Dr. Jan-Philip Gehrcke; 27.05.2015
comment
Это заняло 5 секунд, и все еще работает с Bootstrap 3.3.5. @ Jan-PhilipGehrcke также прав, атрибуты margin больше не нужны, что делает их просто .container-fluid { max-width: XXX%; } в любой пользовательской таблице стилей, которая у вас есть. - person Chris Cirefice; 21.08.2015
comment
Лучшая реализация imho - использовать существующие точки останова, таким образом, если вы когда-либо настраиваете точку останова, все остается согласованным, то есть: max-width: map-get($grid-breakpoints, xl); для размера точки останова xl (по умолчанию 1200 пикселей)! - person Gifford N.; 02.12.2016

arrow_upward
8
arrow_downward

В responseive.less вы можете закомментировать строку, импортирующую responseive-1200px-min.less.

// Large desktops

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

Вот так:

// Large desktops

// @import "responsive-1200px-min.less";
person Henry    schedule 27.06.2012
comment
Да, но когда он импортировал этот файл less и у него есть все файлы css в приложении, он может поместить первый div в тег body следующим образом: ‹div class = container-fluid› и < b> ‹div class = row-fluid›, и весь контейнер станет жидким. Я думаю, что это его план. Я также рекомендую прочитать: scaffolding Там приведен довольно хороший пример. - person ionutab; 12.07.2013

arrow_upward
1
arrow_downward

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

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

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

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

person chech    schedule 10.05.2013

arrow_upward
1
arrow_downward

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

  • Точки останова медиа-запросов
  • Сетка
  • Размеры контейнера

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

person Celdor    schedule 10.02.2015