Bootstrap 容器-流体填充

Question

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

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

显示问题的屏幕截图：

Answer 1

这里的答案都没有帮助我使用 Bootstrap 4。

添加container-fluid p-0删除了水平填充，但创建了一个水平滚动条。

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

对我来说唯一的解决方法是

.container-fluid{ overflow: hidden; }

Answer 2

只需将类 p-0 添加到类 container-fluid 中，然后将类 no-gutters 添加到类行的子元素中，如果您有多个添加到所有行。

例子：

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

Answer 3

根据文档，2019 年的正确方法是在您的p-0类中使用“x”。 当您使用p-0时，您正在为顶部、右侧、底部和左侧设置填充。 如果你使用px-0它是左右“X 坐标”，所以如果你设置py-0它是“Y 坐标并且在<div class="row no-gutters">..

应该是这样的：

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

查看文档： https ://getbootstrap.com/docs/4.1/utilities/spacing/#notation

Answer 4

只需添加此 css

.container-fluid {
   padding: 0px;
}

使用此 CSS 的代码

编辑：

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

Answer 5

添加这些课程帮助了我

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

Answer 6

在这种情况下，该列实际上导致了填充，该填充被写入 bootstrap .css 文件。

你没有提到你使用的是什么版本的 Bootstrap，我假设是 3.x？

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

.noPadding {
padding: 0 !important;
}

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

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

本文帮助我了解了 Bootstrap 网格系统的基础知识以及它如何处理边距和填充。

Bootstrap 4 将包括填充和实用程序类以更精确地操作填充。 在这里阅读

Answer 7

如果您想要一个不涉及 CSS hack 的解决方案 - 只需将当前行包装在另一行中

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

如果您查看行的作用：

margin-right: -15px;
margin-left: -15px;

因此，添加另一行只会抵消您的<div class="col-xs-12">创建的填充

Answer 8

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

当您将 p-0 提供给内部列时，可以通过此解决方案来实现，或者您可以添加一个带有“xyz”之类的列的类并将其样式设置为
“.xyz{填充：0！重要；}”

Answer 9

这适用于 Bootstrap 3

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

}

Answer 10

我认为这些填充是您的样式的结果。 检查 CSS 部分/文件。 或在此处发布完整代码。 然后我们将能够为该问题提供解决方案。

Answer 11

我认为它运作良好。

<section class="your-class">
    <div class="container-fluid no-padding">
        <div class="row no-gutters">
            <div class="col-lg-6"></div>
            <div class="col-lg-6"></div>
        </div>
    </div>
</section>

.no-padding {
  padding: 0;
}

Answer 12

对于 Bootstrap 5 和可能的其他人，你想多了。 你不需要 container-fluid 来让你的 Grid 正常工作。 来自文档：“需要边缘到边缘的设计？删除父级 .container 或 .container-fluid。” 请参阅： https ://getbootstrap.com/docs/5.0/layout/gutters/

所以在这里我只是添加了一个 100% 的宽度进行演示。

<div style="width: 100%">
    <div class="row g-0">
        <div class="col-xs-12">
            test
        </div>
    </div>
</div>

Answer 13

在 Bootstrap5 中， “container-fluid”不能使用外部 CSS。 所以写成，

<div class="container-fluid" style="padding: 3% 12%;">

</div>

Answer 14

对我来说，只需添加行 class 就可以了

Answer 15

像 Jake 一样，我认为在容器流体中使用 12 列是没有意义的。 流体旨在使用 100% 宽度。 当您设置 container-fluid 类引导程序添加填充时，当您设置类行时，引导程序添加负边距，因此内容变为全宽。

Answer 16

只需删除.col-xs-12 。 将您的内容另外包装在全宽列中是没有意义的。