Bootstrap container-fluid padding

问题:

The following HTML is generating unwanted padding:

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

Screenshot showing the problem:

回答1:

None of the answers here helped me with Bootstrap 4.

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

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.

The only workaround for me was

.container-fluid{ overflow: hidden; }

回答2:

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.

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>

回答3:

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

回答4:

Just add this css

.container-fluid {
   padding: 0px;
}

Your Code with this 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.

回答5:

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

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

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

.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 article helped me understand the basics of the Bootstrap grid system and how it handles margins and padding.

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

回答6:

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

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

回答7:

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

回答8:

Adding these classes helped me

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

回答9:

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.

回答10:

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

回答11:

Just remove .col-xs-12. It makes no sense to wrap your content in full-width column additionally.

回答12:

Like Jake, I think there is no sense to use 12 columns inside container fluid. Fluid is intended to use 100% width. When you set container-fluid class bootstrap adds padding, and when you set class row, bootstrap adds negative margin, so content goes full width.