Bootstrap 3、4和5带网格的容器流体增加了不必要的填充 [英] Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding

问题描述

我希望内容流畅，但是在Bootstrap的网格中使用 .container-fluid 时，仍然看到填充.

I'd like my content to be fluid, but when using .container-fluid with Bootstrap's grid, I'm still seeing padding.

如何摆脱填充物?

我看到我没有用 .row 填充，但是我想添加列，并且一旦添加，填充又回来了.

I see that I don't get the padding with .row, but I want to add columns, and as soon as I do, the padding is back.

我希望能够以全宽使用列.

I want to be able to use the columns at full width.

一个例子:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

解决方案:

覆盖bootstrap.css，链接1427&1428(v3.2.0)

Override bootstrap.css, linke 1427 & 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

到

padding-right: 0px;
padding-left: 0px;

推荐答案

您还应该在每个容器中添加一个行"，以解决"该问题！

You should also add a "row" to each container which will "fix" this issue!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

请参见 http://jsfiddle.net/3px20h6t/

这篇关于Bootstrap 3、4和5带网格的容器流体增加了不必要的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！