Html Bootstrap 容器流体填充

Bootstrap container-fluid padding

提问by Ashraf Khan

I don't know. Maybe I'm doing something wrong... I looked into other threads here on stackoverflow but I still have a problem with this unwanted padding

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

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

Here is a photo with result

这是一张有结果的照片

回答by Michael

None of the answers here helped me with Bootstrap 4.

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

Adding container-fluid p-0removed the horizontal padding, but created a horizontal scrollbar.

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

The scrollbars come from the negative margin of the row elements - a 100% width container with no padding gets stretched by 15px on each side. It has nothing to do with column padding, as far as I can see.

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

The only workaround for me was

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

.container-fluid{ overflow: hidden; }

.container-fluid{ overflow: hidden; }

回答by Ashraf Khan

Just add class p-0 to class container-fluid & then add class no-gutters to child elements of class row, if you have more than one add to all rows.

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

Example:

例子：

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

回答by Francisco Fernandez

Just add this css

只需添加这个css

.container-fluid {
   padding: 0px;
}

Your Code with this CSS

您使用此 CSS 的代码

EDIT:

编辑：

With this all the page going to have 0 padding. If you only want 0 padding in that part of the page maybe you should create a class "container-0padding" with that css code for example.

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

回答by Fábio BC Souza

2019 correct way according to the docs is using "x" in your p-0class. When you use p-0you are setting padding for top, right, bottom and left. If you use px-0it's for left-and-right "X coordinates" and so if you set py-0it's "Y coordinates and at the <div class="row no-gutters">...

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

Should be like this:

应该是这样的：

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

Take a look into the docs: https://getbootstrap.com/docs/4.1/utilities/spacing/#notation

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

回答by Chris Nelson

In this case, the column is actually causing the padding, which is written into the bootstrap .css file.

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

You didn't mention what version of Bootstrap you're using, I assume 3.x?

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

I usually add a custom class to my own .css file to eliminate padding when it's not wanted, such as:

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

.noPadding {
padding: 0 !important;
}

Then add the class to your column like so:

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

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

This articlehelped me understand the basics of the Bootstrap grid system and how it handles margins and padding.

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

Bootstrap 4 will include padding and utility classes to manipulate padding more precisely. Read about it here

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

回答by Down_with_opp

If you want a solution that doesn't involve CSS hacks - Just wrap you current row in another row

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

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

If you look at what row does:

如果您查看行的作用：

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

So ading another row will just offset the padding created by your <div class="col-xs-12">

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

回答by Zaid

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

The solution can be achieved by this when you give p-0 to the inner column or you can add a class with the column like "xyz" and give it styling to
".xyz{padding: 0!important;}"

当您将 p-0 赋予内列时，可以通过此解决方案实现，或者您可以添加一个带有“xyz”之类的列的类并将其样式设置为
“.xyz{padding: 0!important;}”

回答by emamut

Adding these classes helped me

添加这些课程对我有帮助

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

回答by Chinthaka Udayasiri

I think those padding is a result with your styling. check the CSS section/file. or post the full code here. then we will be able to give a solution for the problem.

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

回答by Tariqul_Islam

I think It works well.

我认为它运作良好。

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