Bootstrap 3和4.container-fluid与网格添加不需要的填充

Question

我希望我的内容流畅,但在使用.container-fluidBootstrap的网格时,我仍然看到填充.我该如何摆脱填充？

我看到我没有得到.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,linke 1427和1428(v3.2.0)

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

至

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

Answer 1

您还应该为每个容器添加一个"行",以"修复"此问题!

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

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

Answer 2

请从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通过行上设置的负边距将类添加为子元素时,将删除相同的填充.

Answer 3

我认为我有与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在行和列之间嵌套一个以产生额外的-15px边距以推入容器填充.额外的负边距会在小视口上创建水平滚动(进入空白).需要添加overflow-x: hidden到.row它来抑制它.

这同样适用.container-fluid于.container.

Answer 4

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>到文件的末尾。它也在上面的代码中得到了修复）

详细答案
您所获得的填充实际上记录在Bootstrap的文档中：

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

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

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

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

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

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

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

Answer 5

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

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

这个对我有用。

Answer 6

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

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

更好的方法？容器级别（清​​洁剂）完全没有填充物

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