引导3,4和5。容器流体与网格添加不必要的填充

我希望我的内容是流动的，但当使用 .container-fluid与 Bootstrap 的网格，我仍然看到填充。

我怎样才能去掉衬垫？

我看到我没有得到与 .row填充，但我想添加列，一旦我这样做，填充是回来的。

我希望能够在全宽度使用列。

An example:

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

到

padding-right: 0px;
padding-left: 0px;
208097 次浏览
小开

您还应该向每个容器添加一个“ row”，它将“修复”这个问题！

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

参见 http://jsfiddle.net/3px20h6t/

小开

请从 Bootstrap 中找到实际的 css

.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类作为一个子元素时，这个水平填充会被行上设置的负边距移除。

小开

如果使用配置器，可以将 @grid-gutter-width从 30px设置为 0

小开

我想我和 Tim 有同样的要求，但是没有一个答案提供一个“带有正常内部排水沟的视窗边到边列”的解决方案。或者换一种说法: 我怎样才能让我的第一列和最后一列进入容器填充并流到视口的边缘，同时仍然保持列之间的正常水槽。

full width rows

据我所知，没有干净利落的解决办法。这是什么工作对我来说，但它是以外的任何将支持 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，以生成额外的 -15像素的边距，从而将其推入容器填充。额外的负边距在小视窗上创建水平滚动(进入空白)。需要将 overflow-x: hidden添加到 .row以抑制它。

.container-fluid和 .container的工作原理是一样的。

小开

中只需要这些 CSS 属性。容器类 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;
}
小开

在新的 alpha 版本中，他们引入了 公用设施间距类别。 然后，如果你以一种聪明的方式使用它们，结构就可以被调整。

实用工具类的间距

<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将删除列的前导和尾随填充。 One issue left is the embedded rows of a column, as they still have negative margin. In this case:

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

版本差异

Also note the utility spacing classes were changed since version 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填充-顶部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; }
小开

我用过 <div class="container-fluid" style="padding: 0px !important"> 看起来起作用了。

小开

为什么不通过标记左右填充为0来抵消由 容器-液体添加的填充？

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

甚至更好的方法? 在容器水平根本没有填充(清洁)

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

小开

5年多过去了，奇怪的是有这么多的答案有 别跟着我(或反对)引导 规矩或没有实际回答的问题..。
(有关这些错误的详细信息，请查看本答案的最后一部分)

简短的回答:
只需使用 Bootstrap 的 no-gutters类(Bootstrap 4)或 g-0类(Bootstrap 5)在您的行中删除填充:

  <div class="container-fluid">
<!-- For Boostrap 4, use this instead:
<div class="row no-gutters">-->
<div class="row g-0">
<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>

(Also you've forgotten to add </div> to the end of your file. It's fixed in the code above as well)

注:

有些情况下，您还需要 拿开容器本身的填充。在这种情况下，按照 文件的建议，考虑删除 .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 的 文件:

行是列的包装器。每列都有 水平填充 (称为排水沟)控制它们之间的空间。这种填充物 然后在具有 没有边距的行上进行抵消 列中的内容在视觉上是左侧对齐的。

关于解决方案，也有文献记载:

列之间有水平填充以创建水槽 但是，您可以从行和列中删除边距 行上使用 。没有排水沟填充列。

关于投放集装箱:

需要边到边的设计? 放弃父。容器或 。容器-液体。

奖励: 关于在其他答案中发现的错误

  • Avoid hacking bootstrap's container classes instead of making sure that you've put all the content in col-s and wrapped them with row-s as 文件 says:

在网格布局中，内容必须仅放置在列中 列可以是行的直接子行。

  • If you still have to do hack (just in case someone already messed up things and you need to quickly fix your issue) consider using Bootstrap's px-0 for removing horizontal paddings instead pl-0 pr-0 or reinventing your styles.
小开

我认为没有人给出这个问题的正确答案。 我的解决办法是: 只需声明另一个类以及容器流体类示例(. maxx) :

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

  1. Then using specificity in the css part do this:

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

这将工作100% ，并将删除填充从左侧和右侧。 希望这个能帮上忙。

小开

我自己也一直在纠结这个问题我终于相信我已经解决了。在这个问题上有这么多失败的答案，真是令人难以置信

所有您需要做的就是从您的所有。元素，并从。容器-液体。

在我自己的项目中，我有点草率地在 css 文件中添加了以下内容:

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


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

我只是在那里有不同的 colsize 来解释我正在使用的所有不同的 colsize。我相信有一个更干净的方法来编写 css，但这说明了最终的结果。

小开

下面是 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上使用 px-0，在 row上使用 no-gutters来移除衬垫。

Quoting from Bootstrap 4 - Grid system:

行是列的包装器。每列都有水平填充 (called a gutter) for controlling the space between them. This padding 然后对边距为负的行进行抵消。这样，所有 列中的内容在视觉上是左侧对齐的。

列之间有水平填充以创建水槽 但是，您可以从行和列中删除边距 在 .row上用 .no-gutters填充列。

下面是一个现场演示:

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中移除水平填充。

小开

我纠结于此，并意识到在我的场景中，解决方案是简单地删除 <div class="container-fluid"> ... </div>信封。现在我只有:

<main role="main" class="flex-shrink-0">
<?= $content ?>
</main>

为了澄清，div 包含了 $content (而不是 main)。


提交答案