EDITED: Может быть, мне следует спросить, какой селектор устанавливает боковые отступы, когда экран уменьшается до ширины ниже 480 пикселей? Некоторое время я просматривал bootstrap-responseiveness.css, чтобы найти это, но, похоже, на это ничего не влияет.
Оригинал Я в основном хочу удалить любые отступы или поля по умолчанию, установленные для скорости отклика на экранах небольших устройств.
У меня есть background color
переопределенный container-fluid
селектор, и для большего экрана они идеально отображают 100% по ширине, но они уменьшают экран до меньших размеров, по умолчанию Bootstrap, кажется, добавляет маржу или отступы на container-fluid
или container
.
<div class="container-fluid">
<div class="row-fluid">
test
</div>
</div>
Если я использую пользовательский CSS для перезаписи стиля Bootstrap по умолчанию, какой медиа-запрос или селектор мне следует перезаписать для удаления этого заполнения на небольших экранах?
Ответы:
Запрос @media специально для "телефонов":
@media (max-width: 480px) { ... }
Но вы можете удалить отступы / поля для экранов меньшего размера. По умолчанию Bootstrap настраивает поля / отступы для тела, контейнера и навигационных панелей на 978 пикселей.
Вот несколько запросов, которые помогли мне (в большинстве случаев):
@media (max-width: 978px) { .container { padding:0; margin:0; } body { padding:0; } .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: 0; margin-right: 0; margin-bottom:0; } }
Демо
Обновление для Bootstrap 4
Используйте новые адаптивные утилиты интервалов, которые позволяют устанавливать отступы / поля для разной ширины экрана (точки останова): https://stackoverflow.com/a/43208888/171456
источник
Проблема здесь гораздо сложнее, чем удаление заполнения контейнера, поскольку структура сетки полагается на это заполнение при применении отрицательных полей для заключенных строк.
Удаление заполнения контейнера в этом случае вызовет переполнение оси x, вызванное всеми строками внутри этого класса контейнера, это одна из самых глупых вещей в Bootstrap Grid.
По логике к этому следует подходить
.container
класс для чего-либо, кроме строк.container
класса, у которого нет отступов, для использования с HTML без сетки.container
заполнения на мобильном устройстве вы можете вручную удалить его с помощью медиа-запросов,overflow-x: hidden;
что не очень надежно, но работает в большинстве случаев.Если вы используете,
LESS
конечный результат будет выглядеть так@media (max-width: @screen-md-max) { .container{ padding: 0; overflow-x: hidden; } }
Измените медиа-запрос на любой размер, который вы хотите настроить.
В заключение, я настоятельно рекомендую использовать
Foundation Framework
сетку как более продвинутый способ.источник
px-sm-0
столбцы.Этот поток помог найти решение в моем конкретном случае (бутстрап 3)
@media (max-width: 767px) { .container-fluid, .row { padding:0px; } .navbar-header { margin:0px; } }
источник
Для решения подобных проблем я использую CSS - я думаю, самый быстрый и простой способ ... Просто измените его под свои нужды ...
@media only screen and (max-width: 480px) { #your_id {width:000px;height:000px;} } @media only screen and (min-width: 480px) and (max-width: 768px) { #your_id {width:000px;height:000px;} } @media only screen and (min-width: 768px) and (max-width: 959px) { #your_id {width:000px;height:000px;} } @media only screen and (min-width: 959px) { #your_id {width:000px;height:000px;} }
источник
Я получаю элемент, чтобы он занимал 100% ширины устройства, используя отрицательные левые и правые поля. Тело имеет отступ в 24 пикселя, поэтому вы можете использовать отрицательные поля для:
element{ margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
источник
В Bootstrap 4 поле в 15 пикселей, которое имеет исходный контейнер, распределяется по всем строкам и столбцам. Итак, у меня работает что-то вроде этого ...
@media (max-width: 576px) { .container-fluid { padding-left: 5px; padding-right: 5px; } .row { margin-left: -5px; margin-right: -5px; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-left: 5px; padding-right: 5px; } .row.no-gutters { margin-left: 0; margin-right: 0; } }
источник
У меня эта проблема возникала на сайтах, которые использовали похожее форматирование и код, и я ломал голову над тем, что было недостающей деталью, из-за которой некоторые из моих сайтов работали, а некоторые нет.
Для Bootstrap 3: для меня ответ заключался не в переписывании css для .container-fluid, .row или сбросе полей. Я понял, что закономерность заключалась в том, что длина более длинных слов отбрасывала дизайн и создавала поля .
Шаги решения:
Проверьте свою страницу, временно удалив разделы, содержащие контейнеры, и проверьте свой сайт в небольших браузерах. Это определит ваш проблемный контейнер.
У вас может быть проблема с форматированием div. Если да, исправьте. Если все хорошо, то:
Определите, использовали ли вы длинные слова без переноса. Если вы не можете изменить слово (например, для строк тегов, слоганов и т. Д.)
Решение 1. Отформатируйте шрифт до меньшего размера в вашем медиа-запросе для меньшего экрана (обычно достаточно @media (max-width: 767px)).
ИЛИ:
Решение 2:
@media (max-width: 767px){ h1, h2, h3 {word-wrap: break-word;} }
источник
CSS Паулюса Марчюкайтиса отлично работал с моей темой Genesis, вот как я изменил его в соответствии со своими требованиями:
@media only screen and (max-width: 480px) { .entry { background-color: #fff; margin-bottom: 0; padding: 10px 8px;
}
источник
.container-fluid { margin-right: auto; margin-left: auto; padding-left:0px; padding-right:0px; }
источник
Вот что я делаю для Bootstrap 3/4
Используйте контейнер-жидкость вместо контейнера.
Добавьте это в мой CSS
@media (min-width: 1400px) { .container-fluid{ max-width: 1400px; } }
Это удаляет поля ниже экрана шириной 1400 пикселей.
источник
Еще один CSS, который может создать проблему с маржей, - это то, что у вас есть
direction:someValue
в вашем CSS, поэтому просто удалите его, установив его в значение initial.Например:
body { direction:rtl; } @media (max-width: 480px) { body { direction:initial; } }
источник
Простое решение - написать что-то вроде этого:
px-lg-1
mb-lg-5
При добавлении lg класс будет применяться только на больших экранах
источник