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

Отредактированный: Может быть, я должен спросить, какой селектор устанавливает боковые отступы, когда ширина экрана уменьшается ниже 480px? Я некоторое время просматривал 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

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

Demo

Обновление для Bootstrap 4

Используйте новые адаптивные пробелы, которые позволяют устанавливать отступы/поля для разной ширины экрана (точки останова):fooobar.com/questions/90374/...

Ответ 2

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

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

По логике к ней следует подходить

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

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

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

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

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

Ответ 3

Этот поток был полезен при поиске решения в моем конкретном случае (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Ответ 4

Чтобы решить такие проблемы, я использую 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;}
}

Ответ 5

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

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

Ответ 6

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

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

Этапы решения:

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

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

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

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

ИЛИ

Решение 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

Ответ 7

CSS Paulius Marčiukaitis отлично поработал для моей темы Genesis, вот как я еще больше изменил ее для моего требования:

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

}

Ответ 8

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

Ответ 9

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

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

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

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

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

Ответ 10

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

Например:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

Ответ 11

В Bootstrap 4 поле 15px, которое имеет исходный контейнер, каскадно опускается на все строки и столбцы. Итак, что-то вроде этого работает для меня...

@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;
    }
}