Question

我不知道。也许我做错了什么...... 我在stackoverflow上查看了其他线程，但我仍然遇到这个不需要的填充的问题

 <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

只需添加此css

即可

.container-fluid {
   padding: 0px;
}

Your Code with this CSS

编辑：

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

Answer 3

在这种情况下，该列实际上导致填充，该填充被写入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>

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

Bootstrap 4将包含填充和实用程序类，以更精确地操作填充。 Read about it here

Answer 4

添加这些课程对我有帮助

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

Answer 5

  

       var concat = require("gulp-concat"),
         var uglify = require('gulp-uglify'),

gulp.task("js", function() {
     return gulp
       .src([
              "./dev/libs/angular/angular.1.4.5.min.js",
              "./dev/libs/angular/angular-animate.1.4.5.min.js"
         ])
         .pipe(concat("scripts.js"))
         .pipe(hash({
                 "format": "{name}_{size}.js"
           }))
         .pipe(gulp.dest("PATH_FOR_BUILD"));         
    });

当您向内部列赋予p-0时，可以解决此问题，或者您可以添加带有“ xyz”之类的列的类并将其样式赋予
“ .xyz {padding：0！important;}”

Answer 6

如果你想要一个不涉及CSS hacks的解决方案 - 只需将当前行包装在另一行中＆lt; div class =＆＃34; container-fluid＆＃34;＆gt; ＆lt; div class =＆＃34; row＆＃34;＆gt; ＆lt; div class =＆＃34; row＆＃34;＆gt; ＆lt; div class =＆＃34; col-xs-12＆＃34;＆gt; 测试＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; 如果你看一下行： margin-right：-15px; margin-left：-15px; 因此，另一行将只会偏移由＆lt; div class =＆＃34; col-xs-12＆＃34;＆gt;创建的填充。

Answer 7

只需将p-0类添加到容器流体类中，然后将no-gutter添加到类行的子元素中（如果所有行中都添加不止一个）。

示例：

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

这适用于Bootstrap 3

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

}

Answer 9

我认为这些填充是你造型的结果。检查CSS部分/文件。或在此处发布完整代码。那么我们就能够解决这个问题。

Answer 10

我认为效果很好。

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

根据文档的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>

看看文档：{{3}}

Answer 12

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

Answer 13

像杰克一样，我认为在容器液体中使用12根柱是没有意义的。流体旨在使用100％宽度。当你设置容器 - 流体类引导程序添加填充时，当你设置类行时，引导程序会增加负边距，因此内容会全宽。

Bootstrap容器 - 流体填充

13 个答案: