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

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



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



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



body {

    max-width: 950px;

}
513   5  

5 ответов:

Edit

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

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

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

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

Оригинал

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

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

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

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

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

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

25  
2012-10-18 20:39:52

вам не нужно изменять bootstrap-responsive, удалив @media (max-width:1200px) ...

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

  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 */
}
158  
2017-11-15 15:38:39

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

// Large desktops

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

вот так:

// Large desktops

// @import "responsive-1200px-min.less";
9  
2012-06-27 15:31:49

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

Я не хотел редактировать bootstrap-responsive.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% идеально!

2  
2013-05-11 03:47:42

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

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

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

2  
2015-02-11 21:27:46

Comments

    Ничего не найдено.
Click here to cancel reply.