带网格的Bootstrap 3和4 .container-fluid添加了不必要的填充

我希望我的内容流畅，但是当.container-fluid与Bootstrap的网格一起使用时，我仍然看到填充。我如何摆脱填充物？

我看到我没有使用.row填充，但是我想添加列，并且一旦添加，填充就会返回：O。

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

一个例子：

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

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

至

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

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

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

看到http://jsfiddle.net/3px20h6t/

请从Bootstrap中找到实际的CSS

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

添加.container-fluid类时，它会添加15px的水平填充，当您.row通过在行上设置的负边距将类作为子元素添加时，将删除水平填充。

5年过去了，很奇怪的是那里有这么多答案不遵循（或反对）自举规则或实际上没有回答问题...

简短答案：
只需no-gutters在您的行中使用Bootstrap的类即可删除填充：

  <div class="container-fluid">
    <div class="row no-gutters">
      <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>
  </div>

（而且您还忘记了添加</div>到文件的末尾。它也在上面的代码中得到了修复）

注意：

在某些情况下，您也想删除容器本身的填充物。在这种情况下，请考虑按照文档建议使用drop .container或.container-fluidclass 。

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <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>
<!--</div>-->

长答案：

您获得的填充实际上记录在Bootstrap的文档中：

行是列的包装。每列都有水平填充（称为装订线），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充。这样，列中的所有内容在视觉上都在左侧向下对齐。

关于解决方案，也已记录在案：

列具有水平填充以在各个列之间创建装订线，但是，您可以删除行的边距，并删除列上带有.no- gutter的列的填充。

关于放下容器：

需要边缘到边缘的设计吗？删除父.container或.container-fluid。

奖励：关于其他答案中发现的错误

• 避免侵入bootstrap的容器类，而不是确保已将所有内容放入col-s并用-s包裹，row如文档所述：

在网格布局中，必须将内容放置在列中，并且只有列可以是行的直接子代。

• 如果您仍然需要进行破解（以防万一有人弄乱了您的东西，并且您需要快速解决问题），请考虑使用Bootstrap px-0来删除水平填充pl-0 pr-0或重新设计样式。

我认为我的要求与Tim相同，但没有一个答案提供“具有正常内部装订线的视口边缘到边缘列”解决方案。换一种说法：如何使我的第一列和最后一列打入容器填充并流到视口的边缘，同时仍保持列之间的正常间距。

据我所知，没有干净整洁的解决方案。这是对我有用的方法，但是它超出了Bootstrap支持的范围。但是它现在可以使用（Bootstrap 3.3.5和4.0-alpha）。

http://www.bootply.com/ioWBaljBAd

HTML示例：

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS：

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

诀窍是div在行和列之间嵌套a ，以产生额外的-15px边距，以推送到容器填充中。额外的负边距会在小视口上创建水平滚动（进入空白区域）。需要添加overflow-x: hidden来.row抑制它。

这适用于相同.container-fluid的.container。

因此，这是Bootstrap 4的简要摘要：

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

这个对我有用。

为什么不通过将左侧和右侧填充标记为0来否定容器流体添加的填充？

<div class="container-fluid pl-0 pr-0">

更好的方法？在容器级别根本没有填充（清洁剂）

<div class="container-fluid pl-0 pr-0">

您只需要在Bootstrap的.container类中使用这些CSS属性，就可以将普通的网格系统放入他的内部，而容器中的任何内容都不会离开他（视口中没有scroll-x）。

HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS：

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

在新的alpha版本中，他们引入了实用程序间隔类。如果您巧妙地使用它们，则可以对其结构进行调整。

间距实用程序类

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0并且pr-0将从列中删除开头和结尾的填充。剩下的一个问题是列的嵌入行，因为它们的边距仍然为负。在这种情况下：

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

版本差异

另请注意，自版本以来，实用程序间隔类已更改4.0.0-alpha.4。之前，他们是由2个破折号例如=>分离p-x-0和p-l-0等等......

停留在版本3的主题上，这是我在Bootstrap 3项目上使用的内容，并将针对该特定间距实用程序的指南针设置包含在bootstrap-sass（版本3）或bootstrap（版本4.0.0-alpha.3）中，并带有双破折号或bootstrap（版本4.0.0-alpha.4及更高版本）带有单破折号。

另外，最新版本的比率达到5倍（例如pt-5，前5位填充），而不是只有3 倍。

罗盘

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

CSS输出

当然，您始终可以仅从生成的CSS文件复制/粘贴填充间距类。

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

我认为没有人对这个问题给出正确的答案。我的工作解决方案是：1.只需声明另一个类以及容器流体类example（.maxx）：

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. 然后在css部分使用特异性：

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

这将工作100％，并将删除左侧和右侧的填充。我希望这有帮助。

如果您正在使用配置程序，则可以将@grid-gutter-widthfrom 设置30px为0

我已经习惯了<div class="container-fluid" style="padding: 0px !important"> ，它似乎正在工作。

我一直在为此苦苦挣扎，最终我相信我已经解决了。令人难以置信的是，在这个问题上有多少失败的答案

您要做的就是从所有.col元素中删除填充，并从.container-fluid中删除填充。

通过在我的css文件中添加以下内容，我在我自己的项目中有点草率地做到了：

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

我只是那里有不同的col大小，以解决我正在使用的所有不同col大小。我相信可以使用更简洁的方式编写CSS，但这可以说明最终结果。

使用px-0上container，并no-gutters在row去除垫衬。

引用Bootstrap 4-网格系统：

行是列的包装。每列都有水平填充（称为装订线），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充。这样，列中的所有内容在视觉上都在左侧向下对齐。

列有水平填充创建单独的列之间的排水沟，然而，你可以删除行从列margin和padding用.no-gutters的.row。

以下是现场演示：

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

之所以这样的作品是container-fluid和col两个具有以下填充：

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

px-0可以从中删除水平填充，container-fluid也no-gutters可以从中删除填充col。