Я будую свій перший сайт за допомогою Twitter Bootstrap і експериментую з рідинними макетами. Я встановив мій контейнер текучим, тепер вміст всередині займає всю ширину сторінки і адаптується, коли я змінюю розмір браузера.
Дизайн, над яким я працюю, був створений для максимальної ширини ~ 950px.
Я перевірив variables.lessі responsive.less, і документацію Bootstrap; Я не можу повністю зрозуміти, як це зробити.
Я також спробував додати до свого style.css:
body {
max-width: 950px;
}
bodyвирівнює ліворуч, а не по центру, як раніше. Будь-які пропозиції? Я пробував налаштування marginдля autoлівого і правого.
bodyє max-width, на випадок, якщо я хочу зробити щось поза контейнером. У будь-якому випадку, відкладаючи це, я маю справу з контейнером для рідини. Коли я встановлюю рідину в контейнері, він розширюється на всю ширину тіла. Ось чому я намагаюся встановити максимальну ширину для тіла.
@media (min-width: 768px) and (max-width: 979px) { .. }у вашому випадку це буде max-width:950px;.
Відповіді:
Редагувати
Кращий спосіб зробити це:
Створіть власний менший файл як основний менший файл (наприклад, bootstrap.less).
Імпортуйте всі необхідні файли завантажувального файлу. (у цьому випадку вам просто потрібно імпортувати всі файли, що реагують менше, але responsive-1200px-min.less)
Якщо вам потрібно змінити що-небудь у оригінальному файлі завантажувального файлу менше, вам просто потрібно написати власне менше, щоб перезаписати менше коду завантажувального файлу. (Тільки не забудьте ввести менше коду / файлу після @import { /* bootstrap's less file */ };).
Оригінал
У мене така сама проблема. Ось як я це виправив.
Знайдіть медіа-запит:
@media (max-width:1200px) ...
Видали це. (Я маю на увазі всю справу, а не тільки @media (max-width:1200px))
Оскільки за замовчуванням ширина Bootstrap становить 940 пікселів, вам не потрібно нічого робити.
Якщо ви хочете мати власне max-width, просто змініть правило css у медіа-запиті, яке відповідає бажаній ширині.
Вам не потрібно змінювати адаптивний завантажувальний файл, видаляючи @media (max-width:1200px)...
Моя програма має max-width1600 пікселів. Ось як це працювало для мене:
Створити bootstrap-custom.css - Наскільки це можливо, я не хочу перевизначати свій початковий css bootstrap.
Всередині 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 */
}
У responsive.less ви можете прокоментувати рядок, який імпортує responsive-1200px-min.less.
// Large desktops
@import "responsive-1200px-min.less";
Подобається так:
// Large desktops
// @import "responsive-1200px-min.less";
На жаль, ніщо з перерахованого не вирішило проблему для мене.
Я не хотів редагувати bootstrap-responsive.css, тому пішов простим шляхом:
@media (min-width: 768px) and (max-width: 979px)(рядок 461 з останньою завантажувальною версією 2.3.1 на сьогодні)@media (min-width: 979px)там, де було сказано @media (min-width: 768px) and (max-width: 979px)раніше. Це встановлює стиль від 768 до 979 до всього, що перевищує 768.Це воно. Це не оптимально, у вас буде продубльований css, але він працює на 100% ідеально!
Не знаю, чи на це вказували тут. Налаштування .containerширини потрібно встановити на веб-сайті Bootstrap. Мені особисто не потрібно було редагувати або торкатися нічого у файлах CSS, щоб налаштувати мій .containerрозмір, який становить 1600 пікселів. На вкладці Налаштування є три розділи, що відповідають за медіа та реагування Інтернету:
Окрім межі запитів медіа-запитів , на які, на мою думку, посилаються більшість людей, я також змінився @container-desktopна (1130px + @grid-gutter-width)та @container-large-desktopна (1530px + @grid-gutter-width). Тепер .containerзмінюється його ширина, якщо мій браузер масштабований до ~ 1600px та ~ 1200px. Сподіваюся, це може допомогти.