Bootstrap 3、4 和 5 .container-fluid 带有网格添加不需要的填充 [英] Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding

问题描述

我希望我的内容流畅，但是当将 .container-fluid 与 Bootstrap 的网格一起使用时，我仍然看到填充.

我怎样才能摆脱填充?

我发现我没有使用 .row 获得填充，但我想添加列，一旦添加，填充就回来了.

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

示例:

<div class="row"><div class="col-sm-6"><p>使用此文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个主要是准系统的 HTML 文档.</p>
<div class="col-sm-6"><p>使用此文档可以快速启动任何新项目.<br>你得到的只是这个文本和一个主要是准系统的 HTML 文档.</p>

我有解决方案:

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

padding-right: 15px;左边距:15px；

到

padding-right: 0px;填充左:0px；

解决方案

你还应该为每个容器添加一个行"，以修复"这个问题！

<div class="row">一些文字

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

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

How can I get rid of the padding?

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.

An example:

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

Solution I've got:

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

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

to

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>

See http://jsfiddle.net/3px20h6t/

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