Bootstrap 3 и 4 .container-fluid с сеткой, добавляющей ненужные отступы

Я бы хотел, чтобы мой контент был плавным, но при использовании .container-fluidс сеткой Bootstrap я все еще вижу отступы. Как мне избавиться от прокладки?

Я вижу, что у меня нет заполнения с помощью .row, но я хочу добавить столбцы, и как только я это сделаю, заполнение вернется: O.

Я хочу иметь возможность использовать столбцы на полную ширину.

Пример:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Решение у меня есть:

Переопределить bootstrap.css, linke 1427 и 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

к

padding-right: 0px;
padding-left: 0px;

Вы также должны добавить «строку» к каждому контейнеру, чтобы «исправить» эту проблему!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

См. Http://jsfiddle.net/3px20h6t/

Найдите актуальный css из Bootstrap

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

Когда вы добавляете .container-fluidкласс, он добавляет горизонтальный отступ в 15 пикселей, и то же самое будет удалено, когда вы добавите .rowкласс в качестве дочернего элемента с помощью отрицательного поля, установленного в строке.

Прошло 5 лет, и довольно странно, что там так много ответов, которые не соответствуют (или против) правилам начальной загрузки или фактически не отвечают на вопрос ...

Краткий ответ:
просто используйте no-guttersкласс Bootstrap в своей строке, чтобы удалить отступы:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Также вы забыли добавить </div>в конец файла. Это также исправлено в приведенном выше коде)

Примечание:

Бывают случаи, когда нужно удалить и набивку самого контейнера. В этом случае рассмотрите возможность удаления классов .containerили .container-fluidклассов в соответствии с рекомендациями документации .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Длинный ответ:

В паддингах вы получаете фактически описывались в Bootstrap в документации :

Строки - это оболочки для столбцов. У каждого столбца есть горизонтальный отступ (называемый желобом) для управления пространством между ними. Затем этому заполнению противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левому краю.

И о решении, которое тоже было задокументировано:

Столбцы имеют горизонтальные отступы для создания промежутков между отдельными столбцами, однако вы можете удалить поля из строк и заполнение столбцов с помощью .no- gutters в строке .row.

Что касается падения контейнера:

Нужен дизайн от края до края? Отбросьте родительский .container или .container-fluid.

Бонус: Об ошибках, обнаруженных в других ответах

• Избегайте взлома контейнерных классов начальной загрузки вместо того, чтобы убедиться, что вы поместили весь контент в col-s и обернули их row-s, как говорится в документации :

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

• Если вам все еще нужно взломать (на случай, если кто-то уже что-то напутал, и вам нужно быстро исправить вашу проблему), подумайте об использовании Bootstrap px-0для удаления горизонтальных отступов вместо этого pl-0 pr-0или заново изобретайте свои стили.

Я думаю, что у меня было то же требование, что и у Тима, но ни один из ответов не предусматривает решение «столбцы от края до края окна просмотра с обычными внутренними желобами». Или по-другому: как я могу заставить мои первый и последний столбцы разбиться на заполнение контейнера и перетекать к краю области просмотра, сохраняя при этом нормальные промежутки между столбцами.

Насколько я могу судить, аккуратного и чистого решения не существует. Это то, что у меня работает, но выходит далеко за рамки всего, что поддерживалось бы Bootstrap. Но пока работает (Bootstrap 3.3.5 и 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Образец HTML:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

Хитрость заключается в том, чтобы вложить a divмежду строкой и столбцами, чтобы сгенерировать дополнительный запас -15 пикселей для вставки в заполнение контейнера. Дополнительное отрицательное поле создает горизонтальную прокрутку (в пробел) на небольших окнах просмотра. Добавление overflow-x: hiddenк .rowтребуется , чтобы подавить его.

Это работает так же, .container-fluidкак .container.

Итак, вот краткое описание Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Меня устраивает.

Почему бы не свести на нет отступы, добавленные container-fluid , пометив левое и правое отступы как 0?

<div class="container-fluid pl-0 pr-0">

даже лучший способ? нет прокладки на уровне контейнера (очиститель)

<div class="container-fluid pl-0 pr-0">

Вам нужны эти свойства CSS только в классе .container Bootstrap, и вы можете поместить внутрь него обычную сеточную систему, при этом содержимое контейнера не будет из него (без scroll-x в области просмотра).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

В новых альфа-версиях они представили служебные классы интервалов . Затем структуру можно изменить, если использовать их с умом.

Расстановка служебных классов

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0и pr-0удалит начальные и конечные отступы из столбцов. Осталась одна проблема - встроенные строки столбца, поскольку они все еще имеют отрицательный запас. В таком случае:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Отличия версий

Также обратите внимание, что классы интервалов утилит были изменены с версии 4.0.0-alpha.4. Прежде чем они были разделены на 2 тире , например , => p-x-0и p-l-0и так далее ...

Чтобы оставаться в теме для версии 3: это то, что я использую в проектах Bootstrap 3, и включаю настройку компаса для этой конкретной утилиты интервалов в bootstrap-sass(версия 3) или bootstrap(версия 4.0.0-alpha.3) с двойным тире или bootstrap(версия 4.0.0-alpha.4 и выше) с одинарным тире.

Кроме того, последние версии увеличиваются до 5-кратного соотношения (например, pt-5padding-top 5) вместо 3.

Компас

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Вывод CSS

Конечно, вы всегда можете скопировать / вставить классы интервалов заполнения только из сгенерированного файла css.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Думаю, никто не дал правильного ответа на вопрос. Мое рабочее решение: 1. Просто объявите другой класс вместе с примером класса жидкого контейнера (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. Затем, используя специфику в части css, сделайте следующее:

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

Это будет работать на 100% и удалит отступ слева и справа. Надеюсь, это поможет.

Если вы работаете с конфигуратором, вы можете установить @grid-gutter-widthот 30pxдо0

Я использовал <div class="container-fluid" style="padding: 0px !important"> и вроде работает.

Я сам боролся с этим, и я, наконец, считаю, что понял. Невероятно, сколько существует неудачных ответов на этот вопрос

Все, что вам нужно сделать, это удалить прокладку со всех ваших элементов .col, а также удалить прокладку из .container-fluid.

Я сделал это в своем собственном проекте немного небрежно, добавив в свой файл css следующее:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

У меня просто разные размеры col, чтобы учесть все разные размеры col, которые я использую. Я уверен, что есть более чистый способ написания CSS, но это иллюстрирует конечный результат.

Используйте px-0на containerи no-guttersна, rowчтобы удалить прокладки.

Цитата из Bootstrap 4 - Система сеток :

Строки - это оболочки для столбцов. У каждого столбца есть горизонтальный отступ (называемый желобом) для управления пространством между ними. Затем этому заполнению противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левому краю.

Столбцы имеют горизонтальные отступы для создания промежутков между отдельными столбцами, однако вы можете удалить поля для строк и отступы для столбцов с .no-guttersпомощью .row.

Ниже приводится живая демонстрация:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

Причиной этого является то , что работает , container-fluidи colоба имеют следующие отступы:

padding-right: 15px;
padding-left: 15px;

px-0может удалить горизонтальную прокладку container-fluidи no-guttersможет удалить прокладку из col.