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

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

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

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

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

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

8 64
css twitter-bootstrap media-queries responsive-design

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 класс, который не имеет заполнения для использования с не-grid html
  3. на удалении .container заполнение на мобильном телефоне вы можете вручную удалить его с помощью медиа-запросов, а затем 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