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

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.

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

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сетку как более продвинутый способ.

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

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

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

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

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

Решение 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 класс будет применяться только на больших экранах