Бутстрап 3 и 4.контейнер-флюид с сеткой, добавляющей нежелательные дополнения

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Из того, что я могу сказать, нет четкого и чистого решения. Это то, что работает для меня, но это хорошо за пределами того, что было бы поддержано 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;
}

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

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

Ответ 4

Прошло 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> в конец вашего файла. Это также исправлено в приведенном выше коде)

Длинный ответ
Получаемые вами отступы задокументированы в документации Bootstrap:

Ряды являются обертками для колонн. Каждый столбец имеет горизонтальное заполнение (называемое желобом) для управления пространством между ними. Этому отступу затем противодействуют строки с отрицательными полями. Таким образом, весь контент в ваших столбцах визуально выравнивается по левой стороне.

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

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

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

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

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

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

Ответ 5

Вам нужны только эти свойства CSS в классе .container Bootstrap, и вы можете установить внутри него обычную сетку без какого-либо содержимого контейнера из него (без прокрутки-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;
}

Ответ 6

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

Пространственные служебные классы

<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 черточками, например, => px-0 и pl-0 и так далее...

Чтобы остаться в теме для версии 3: это то, что я использую в проектах Bootstrap 3 и включаю настройку компаса, для этой конкретной утилиты spacing, в 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; }

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

Ответ 11

Я сам боролся с этим и наконец-то поверил, что понял это. Невероятно, сколько нет ответов на этот вопрос

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

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

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

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

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

Ответ 12

Итак, вот краткое резюме по Bootstrap 4:

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

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