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

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

Как можно избавиться от прокладки?

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

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

Пример:

<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, ссылки 1427 и 1428 (v3.2.0)

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

to

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

twitter-bootstrap bootstrap-4 twitter-bootstrap-3 bootstrap-5
person Tim    schedule 21.08.2014    source источник
comment
может быть полезно leejacksondev.com/   -  person im_brian_d    schedule 21.08.2014
comment
Можете ли вы опубликовать свой соответствующий код, чтобы мы могли адаптировать наши ответы к вашему коду?   -  person Simple Sandman    schedule 21.08.2014
comment
Обновлено с кодом! Я хочу удалить отступы, когда у меня есть столбец, а не только когда я использую строку.   -  person Tim    schedule 22.08.2014
comment
это не правильное решение! я предложил перейти к ответу @part   -  person Pooja Roy    schedule 24.07.2015

Ответы (13)


arrow_upward
129
arrow_downward

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

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

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

person PArt    schedule 21.08.2014
comment
Спасибо. То, что я пытаюсь сделать, это удалить отступы, когда я использую столбцы. Любая идея о том, как я могу это сделать? - person Tim; 22.08.2014
comment
Это возможно только с помощью дополнительного класса... Я определил класс с именем remove-padding, который просто имеет .remove-padding {padding-left: 0; заполнение справа: 0; поле слева: 0; margin-right: 0} Насколько я знаю, нет предопределенного класса для удаления отступа 15px по умолчанию. - person PArt; 24.08.2014
comment
Я не могу понять, как этот ответ получил так много голосов, хотя он не соответствует рекомендациям Bootstrap Grid System. Третье правило в разделе Введение гласит, что контент должен размещаться внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк. Ответ Лукаса Нельсона обеспечивает справедливый подход для достижения желаемого эффекта без нарушения правила синтаксиса. - person Siavas; 05.01.2017
comment
Вы также можете использовать класс row напрямую с классами col-**-*, если ваш макет подходит. - person Anwar; 12.01.2017
comment
Как за это можно проголосовать 87 раз (и подсчет), если это не отвечает на вопрос? В вопросе говорится, что он работает, когда используется только row ... но нет, когда используются столбцы (для которых этот факт игнорируется в этом ответе)? В любом случае, я получаю такое же ошибочное отступы в 15 пикселей, как указано в вопросе, и это очень расстраивает. - person Jeach; 09.03.2018
comment
@Jeach это просто работает, йоу - person dawn; 03.07.2018
comment
Что, если я захочу нормальный .container для десктопа и избавлюсь от этого дурацкого пробела для мобильных устройств? - person Greg Wozniak; 13.07.2019
comment
Это не работает для Bootstrap 4 и использования .col. Проверьте jsfiddle.net/cabpz865... Для начальной загрузки 4 используйте класс .no-gutters на .row - person Sunny Patel; 16.10.2019

arrow_upward
44
arrow_downward

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

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

  <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.

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

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

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

  • Если вам все еще нужно заняться хаком (на случай, если кто-то уже что-то напутал, и вам нужно быстро исправить вашу проблему), рассмотрите возможность использования Bootstrap px-0 для удаления горизонтальных отступов вместо pl-0 pr-0 или заново изобретите свои стили.
person Just Shadow    schedule 10.01.2019
comment
.container-fluid по-прежнему содержит padding-right: 15px и padding-left: 15px, а это значит, что вы все равно не сможете совместить окно с помощью вашего метода. Вам все равно нужно будет сделать что-то вроде container-fluid px-0. - person lightyrs; 05.02.2019
comment
В этом случае в документации рекомендуется просто удалить родительский .container или .container- жидкость.. Я также включил это в ответ. - person Just Shadow; 10.02.2020
comment
Удаление контейнера, в свою очередь, приводит к небольшому переполнению строк. Удаление отрицательного правого поля в строках устраняет переполнение, но портит макет. В конце концов, я не нашел другого способа, кроме как установить padding: 0; overflow-x: hidden в контейнере. - person vctls; 18.12.2020
comment
no-gutters не влияет на мой макет контейнерной жидкости. В Bootstrap 5, похоже, нет инструкций о том, как использовать container-fluid. Я хочу иметь div (карточки) с фиксированной максимальной шириной, которые разбросаны (по выравниванию), чтобы заполнить ширину области просмотра, И сжимаются вместе, когда не хватает горизонтального пространства. Мне приходится часами добавлять CSS, но я все равно не получаю того, что хочу. - person David Spector; 05.05.2021
comment
Я получаю некоторый успех, используя container-fluid, используя строки с классами d-flex justify-content-evenly и карточки с фиксированной шириной. Нет col div. Карты красиво расставлены в ширину md и больше, но хорошо сжимаются по ширине мобильного телефона. - person David Spector; 05.05.2021

arrow_upward
34
arrow_downward

Пожалуйста, найдите настоящий 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 в качестве дочернего элемента с помощью отрицательного поля, установленного в строке.

person Kishore Kumar    schedule 22.08.2014
comment
Огромное спасибо. Однако я хотел бы удалить его, когда использую столбец. Я действительно не хочу связываться с основным CSS-бутстрапом. Я подозреваю, что должен быть санкционированный способ сделать это. Есть предположения? - person Tim; 22.08.2014
comment
Если вы хотите использовать столбец во всю ширину, вы можете применить col-md-12 col-sm-12 css в строке - person Kishore Kumar; 22.08.2014
comment
Спасибо. Я пробовал это, но я все еще получаю отступы. Кроме того, мне нужны две колонки. Я что-то пропустил? - person Tim; 22.08.2014
comment
Отступы, которые вы видите, по умолчанию используются в Bootstrap, если вы хотите избавиться от них, как добавить свой собственный класс. Когда вы добавляете новый класс и хотите переопределить загрузку, вы можете добавить !important после стиля. - person Kishore Kumar; 22.08.2014
comment
Если два столбца, вы можете добавить этот класс в свой столбец col-md-6 - person Kishore Kumar; 22.08.2014
comment
Но то, что вы говорите, в основном противоречит документации Bootstrap в правилах Grid System. В котором говорится о col добавлении левого и правого отступов по 15 пикселей, всего 30 пикселей. И также говорится, что row исправит это, установив левое/правое поле -15px. Но в документации ничего не говорится о том, что container-fluid добавляет собственный отступ? Если это правда, то это делает всю коррекцию row практически бесполезной и, таким образом, дает результат смещения, как указано в вопросе выше, и как я получаю. - person Jeach; 09.03.2018

arrow_upward
20
arrow_downward

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

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

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

person Dm Mh    schedule 10.06.2019
comment
Для Bootstrap 4 это правильный ответ и лучшая практика. - person Syafiq Freman; 24.01.2020
comment
@SyafiqZainal, а также это дубликат моего исходного ответа ниже (опубликованного намного раньше): D Итак, теперь мне интересно, можно ли публиковать тот же ответ в StackOverflow. - person Just Shadow; 06.02.2020
comment
Это тоже правильный ответ. px-0 удаляет отступы из контейнера-жидкости. По поводу удаления желобов с колонн тоже правильный ответ. - person Max; 30.11.2020
comment
Это px-0, который сработал для меня, и это должен быть правильный ответ IMO. - person thinkvantagedu; 16.04.2021

arrow_upward
14
arrow_downward

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

строки полной ширины

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

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

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

Это работает так же для .container-fluid, как и для .container.

person Lucas Nelson    schedule 04.02.2016
comment
почему бы просто не .full-width-row > div { padding: 0; } - person Bamieh; 27.11.2016
comment
Это не работает, вы все равно получаете желоб в начале и конце строки: bootply.com/eM8y3kkfbi - person Lucas Nelson; 04.12.2016
comment
Это глупо, но использование overflow: hidden действительно единственный способ удалить только отступ контейнера без добавления горизонтальной прокрутки или нарушения макета. - person vctls; 18.12.2020

arrow_upward
7
arrow_downward

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

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

еще лучше? вообще без заполнения на уровне контейнера (чище)

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

person iCrus    schedule 16.09.2018
comment
pl-0 pr-0 можно изменить на px-0 - person Patrick McDonald; 21.03.2019

arrow_upward
4
arrow_downward

Вам нужны только эти свойства 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;
}
person Aaron Nuñez    schedule 29.05.2017

arrow_upward
3
arrow_downward

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

Вспомогательные классы интервалов

<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. Прежде чем они были разделены двумя тире, например. => 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-5 padding-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; }
person Tim Vermaelen    schedule 29.06.2017

arrow_upward
3
arrow_downward

Используйте 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.

person Wenhe Qi    schedule 26.07.2020

arrow_upward
2
arrow_downward

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

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

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

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

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

person Sahil Kumar Singh    schedule 06.02.2019
comment
Как насчет px-0 для установки левого и правого заполнения для Bootstrap 4 - person Vincent Liong; 16.05.2019

arrow_upward
1
arrow_downward

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

person Stefan    schedule 21.09.2015

arrow_upward
1
arrow_downward

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

person Dave    schedule 10.05.2018
comment
можно было бы избежать стиля и вместо этого добавить служебный класс p-0 - person iCrus; 17.09.2018

arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Max Flanagan    schedule 01.04.2019