Html 引导容器流体填充

以下HTML正在生成不需要的填充：

 <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

测试

显示问题的屏幕截图：

---

我认为这些填充物是您的造型造成的。检查CSS部分/文件。或者在这里发布完整的代码。然后，我们将能够给出问题的解决方案。

只需添加此css即可

.container-fluid {
   padding: 0px;
}

编辑：

---

这样，所有页面都将有0个填充。如果您只想在页面的该部分添加0填充，那么您可能应该使用该css代码创建一个类“container-0padding”。

在这种情况下，该列实际上是导致填充的原因，该填充被写入bootstrap.css文件中

你没有提到你使用的是什么版本的引导，我想是3.x吧

我通常会在自己的.css文件中添加一个自定义类，以在不需要填充时消除填充，例如：

.noPadding {
padding: 0 !important;
}

然后将类添加到列中，如下所示：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 noPadding">
            test
        </div>
    </div>
</div>

测试

帮助我了解引导网格系统的基本知识，以及它如何处理边距和填充

bootstrap4将包括padding和实用程序类，以便更精确地操作padding。

---

只需删除

.col-xs-12

。另外，将内容包装在全宽列中是没有意义的

像杰克一样，我认为在容器液体中使用12根柱子是没有意义的。流体拟使用100%宽度。当您设置container fluid类时，引导会添加填充，而当您设置类行时，引导会添加负边距，因此内容会全宽。

如果您想要一个不涉及CSS攻击的解决方案，只需将当前行包装到另一行即可

 <div class="container-fluid">
    <div class="row">    
       <div class="row">
            <div class="col-xs-12">
                test
            </div>
        </div>
    </div>
</div>

---

因此，加载另一行只会抵消由您的

创建的填充。这里的答案对引导4没有帮助

添加

容器流体p-0

删除了水平填充，但创建了一个水平滚动条

滚动条来自行元素的负边距-一个100%宽度的容器，没有填充，每边拉伸15px。据我所知，这与列填充无关

我唯一的解决办法是

。容器流体{
溢出：隐藏；
}

我认为它工作得很好。

测试

当您将p-0指定给内部列时，或者您可以使用“xyz”这样的列添加一个类，并将其样式设置为

---

“.xyz{padding:0！important；}”

只要将类p-0添加到类容器流体中，然后将类no水槽添加到类行的子元素中（如果有多个添加到所有行中）

例如：

<div class="container-fluid p-0">
    <div class="row no-gutters">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

Or
<div class="container-fluid p-0">
    <div class="row no-gutters">
        <div class="col-xs-12">
            test
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

测试
或
测试
测试

2019根据文档，正确的方法是在

p-0

类中使用“x”。 当您使用

p-0

时，您正在为顶部、右侧、底部和左侧设置填充。如果您使用

px-0

它表示左右“X坐标”，因此如果您设置

py-0

它表示Y坐标，并且位于

。

应该是这样的：

<div class="container-fluid px-0">
 <div class="row no-gutters">
     [..... other codes]
 </div>
</div>

[……其他代码]

---

查看文档：

添加这些类对我很有帮助

<div class="container-fluid p-0 overflow-hidden">

---

这适用于引导3

.container {
   width: calc(100% + 30px);
   padding-right: 0;
   padding-left: 0;
   margin-left: -30px;
   overflow: hidden;

---

---

}

这是引导填充，当您使用类“container”时，有一个填充，当您使用“col”时“还有一个填充物。从引导中移除填充的唯一方法。css@Francisco费尔南德斯：是的。我正在考虑从bootstrap.css中删除此填充，但就我以前的记忆而言，这项工作是正确的。是的，我是这样做的，但我有点困惑，为什么在使用容器流体时会存在此填充：d因为：。容器流体{右填充：15px；左填充：15px；右边距：自动；左边距：自动；}这是bootstrap.cs中的代码，然后我们有了.row{margin right:-15px；margin left:-15px；}这将使用bootstrap 4Bootstrap 4beta输出生成水平滚动。实际上，您不需要自定义类，只需使用

。文档现在在这里：@amoebe这应该是公认的答案。我这样做了，但我的页面现在有一个水平滚动条。有没有关于这一点的修正，或者是我的元素太大了？@cjones3724听起来您的行中至少有一个元素具有固定的宽度。作为此答案的改进，您可以轻松删除填充，并避免水平滚动条，只需将

无水槽

类添加到

行

元素。这将删除官方文件中规定的负边距。因此，不需要进一步的css规则。@wireddolph这也会从所有直接子列中删除水平填充。。这个答案可以帮助您！2019:）Bootstrap 4有。p-0。谢谢：-）这是一个正确的解决方案，适用于只有1列的情况。这应该是公认的答案。别忘了，如果嵌入行，还应该向这些行添加

no gutters

类。我回到了一个遗留项目，在这个项目中，我仍然需要使用Bootstrap，如果您希望在列之间添加gutters，这将不起作用。到2020年，似乎还没有正式的解决方案来创建一个没有奇怪的容器填充或缺少栏边沟的全宽网格。这是正确的方法，当你有几个栏，你只想在里面而不想在边上排水沟，就像你想让边栏到达窗户边缘一样。虽然很难看，但它很管用。

<div class="container-fluid px-0">
 <div class="row no-gutters">
     [..... other codes]
 </div>
</div>

<div class="container-fluid p-0 overflow-hidden">

.container {
   width: calc(100% + 30px);
   padding-right: 0;
   padding-left: 0;
   margin-left: -30px;
   overflow: hidden;