Bootstrap - Удаление отступов или полей, когда размер экрана меньше

89

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 по умолчанию, какой медиа-запрос или селектор мне следует перезаписать для удаления этого заполнения на небольших экранах?

Сеонг Ли
источник
1
Собственно обивка добавляется к телу.
Мистер Смит

Ответы:

116

Запрос @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

Зим
источник
4
Да! наконец нашел, что задает это поведение. Вы заметили мою проблему прямо сейчас. Огромное спасибо.
Сеонг Ли
Спасибо за полезный совет. У меня отлично работает.
Sedat Kumcu
это очень полезно и работает для начальной загрузки .. спасибо
Фейсал
как максимальная ширина для открытой панели навигации?
Faisal
Возможно, у меня была аналогичная проблема, но она была связана с отступом между телом и фактическим классом .container. Контейнер был действительно маленьким для экрана Iphone 5, утилиты интервалов мне совсем не помогли, вместо этого я напрямую редактирую стиль тела, изменяя отступ с 50 пикселей на 15 пикселей, теперь у нас намного больше места на экране.
Пауло Энрике
20

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

Удаление заполнения контейнера в этом случае вызовет переполнение оси x, вызванное всеми строками внутри этого класса контейнера, это одна из самых глупых вещей в Bootstrap Grid.

По логике к этому следует подходить

  1. Никогда не использовать .containerкласс для чего-либо, кроме строк
  2. Сделайте клон .containerкласса, у которого нет отступов, для использования с HTML без сетки
  3. Для удаления .containerзаполнения на мобильном устройстве вы можете вручную удалить его с помощью медиа-запросов, overflow-x: hidden;что не очень надежно, но работает в большинстве случаев.

Если вы используете, LESSконечный результат будет выглядеть так

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Измените медиа-запрос на любой размер, который вы хотите настроить.

В заключение, я настоятельно рекомендую использовать Foundation Frameworkсетку как более продвинутый способ.

Зяд Шериф
источник
Это все еще работает для Bootstrap 4, если по какой-то причине вы не хотите использовать px-sm-0столбцы.
Себастьян Томас
8

Этот поток помог найти решение в моем конкретном случае (бутстрап 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}
Майк Дорси
источник
7

Для решения подобных проблем я использую 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;}
}
ОБЯЗАТЕЛЬСТВО
источник
1
извините .. в этом случае он не перезаписывает отступы, просто добавляя селектор ...
Сеонг Ли,
1
@tassoevan Боюсь, я уже знал, было ли 000px таким же, как 0, и изменение 000px на 0 не решит проблему плюс, я не знаю, стоит ли устанавливать ширину равной значению пикселя даже равному 0. Я думаю, это как-то связано с полями или отступами.
Сеонг Ли
1
«000» было просто примером. Вы должны написать #your_id {margin: 5px; padding: 0px;} вместо #your_id {width: 000px; height: 000px;}
WaPaRtY
2
Старайтесь всегда писать правильный код! Новичков это может сбить с толку! :)
Mackelito
3

Я получаю элемент, чтобы он занимал 100% ширины устройства, используя отрицательные левые и правые поля. Тело имеет отступ в 24 пикселя, поэтому вы можете использовать отрицательные поля для:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}
Дэн Гейл
источник
2

В 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;
    }
}
МастаБаба
источник
1
недооцененный ответ, это помогло мне избавиться от горизонтальной полосы прокрутки на мобильном телефоне
Уильям Рандокун
1

У меня эта проблема возникала на сайтах, которые использовали похожее форматирование и код, и я ломал голову над тем, что было недостающей деталью, из-за которой некоторые из моих сайтов работали, а некоторые нет.

Для Bootstrap 3: для меня ответ заключался не в переписывании css для .container-fluid, .row или сбросе полей. Я понял, что закономерность заключалась в том, что длина более длинных слов отбрасывала дизайн и создавала поля .

Шаги решения:

  1. Проверьте свою страницу, временно удалив разделы, содержащие контейнеры, и проверьте свой сайт в небольших браузерах. Это определит ваш проблемный контейнер.

  2. У вас может быть проблема с форматированием div. Если да, исправьте. Если все хорошо, то:

  3. Определите, использовали ли вы длинные слова без переноса. Если вы не можете изменить слово (например, для строк тегов, слоганов и т. Д.)

Решение 1. Отформатируйте шрифт до меньшего размера в вашем медиа-запросе для меньшего экрана (обычно достаточно @media (max-width: 767px)).

ИЛИ:

Решение 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}
Ким Макканн
источник
1

CSS Паулюса Марчюкайтиса отлично работал с моей темой Genesis, вот как я изменил его в соответствии со своими требованиями:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

Свагатам Маджумдар
источник
0
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
Индраджит Ядав
источник
Из отзыва Que: Не могли бы вы уточнить.
Rahul
0

Вот что я делаю для Bootstrap 3/4

Используйте контейнер-жидкость вместо контейнера.

Добавьте это в мой CSS

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

Это удаляет поля ниже экрана шириной 1400 пикселей.

Райан NZ
источник
0

Еще один CSS, который может создать проблему с маржей, - это то, что у вас есть direction:someValueв вашем CSS, поэтому просто удалите его, установив его в значение initial.

Например:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}
Ричард Сокер
источник
0

Простое решение - написать что-то вроде этого:

px-lg-1

mb-lg-5

При добавлении lg класс будет применяться только на больших экранах

Абдельсалам Мегахед
источник