Bootstrap - Видалення заповнення або поля, коли розмір екрана менший

ВИДАЛЕНО: Може, я повинен запитати, який селектор встановлює бічні відступи, коли екран зменшується до ширини нижче 480 пікселів? Я деякий час переглядав bootstrap-responsiveness.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 коригує поля / відступи до основного елемента, контейнера та панелей навігації на рівні 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

Використовуйте нові адаптивні інтервали використання, які дозволяють встановлювати відступи / поля для різної ширини екрана (точки зупинки): https://stackoverflow.com/a/43208888/171456

Проблема тут набагато складніша, ніж видалення заповнення контейнера, оскільки структура сітки спирається на це заповнення при застосуванні негативних полів для укладених рядків.

Видалення заповнення контейнера в цьому випадку призведе до переповнення осі х, спричиненого усіма рядками всередині цього класу контейнера, це одна з найдурніших речей про сітку Bootstrap.

Логічно до цього слід підійти

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

Якщо ви використовуєте LESSкінцевий результат, буде виглядати так

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

Змініть медіа-запит на будь-який розмір, який ви хочете націлити.

Заключні думки, я б настійно рекомендував використовувати Foundation FrameworkGrid як більш просунутий шлях

Ця тема допомогла знайти рішення в моєму конкретному випадку (bootstrap 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, поле 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;
    }
}

У мене ця проблема трапляється на сайтах, які використовують подібне форматування та код, і я роздумував над тим, що бракувало деталей, що змусили деякі мої сайти працювати, а деякі ні.

Для 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;
    }   
}

Це видаляє поля нижче 1400px ширини екрана

Інший css, який може спричинити проблему маржі, - це те, що у вас є direction:someValueу вашому css, тому просто видаліть його, встановивши для початкового значення.

Наприклад:

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

Найпростішим рішенням є написати щось подібне,

px-lg-1

mb-lg-5

Додавши lg, клас буде застосовуватися лише на великих екранах