Bootstrap容器 - 流体填料

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

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

添加这些课程对我有帮助

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

Answer 4

只需将class p-0添加到类container-fluid中，然后将no-gutter添加到类row的子元素中（如果所有行中都添加多个）。

例：

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

只需添加此CSS

.container-fluid {
   padding: 0px;
}

你的代码与这个CSS

编辑:

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

Answer 6

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