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

редактировать: Может быть, я должен спросить, какой селектор устанавливает боковую прокладку, когда экран уменьшается до ширины ниже 480px? Я просматривал bootstrap-отзывчивость.css некоторое время, чтобы найти это, но ничего не влияет на это.

Оригинал Я в основном хочу удалить любое заполнение по умолчанию или набор полей для реагирования на небольших экранах устройств.

у меня есть background color изменить на container-fluid селектор и для более большого экрана они прекрасно отображают 100% по ширине, но они уменьшают экран до меньших размеров, по умолчанию Bootstrap, похоже, добавляет поле или отступ наcontainer-fluid или container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

если я использую пользовательский css для перезаписи стиля Bootstrap по умолчанию, какой медиа-запрос или селектор я должен перезаписать для удаления этого заполнения на меньших экранах?

64
css media-queries responsive-design twitter-bootstrap

8 ответов

запрос @media специально для "телефонов"..

@media (max-width: 480px) { ... }

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

вот некоторые запросы, которые работали (в большинстве случаев) для меня:

@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

использовать новое отзывчивый интервал utils которые позволяют установить отступы / поля для различных Ширин экрана (точки останова): https://stackoverflow.com/a/43208888/171456

79

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

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

логически это должно быть приближено

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

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

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

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

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

17

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

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

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

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

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

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

для Bootstrap 3: Ответ для меня не был в переписывании css для .контейнер-жидкости .строка или сброс полей, последовательный шаблон, который я понял, был длина более длинных слов сбрасывала дизайн и создавала поля.

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

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

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

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

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

или:

решение 2: 

@media (max-width: 767px){

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

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

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

}

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