114

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

我怎样才能摆脱填充？

我看到我没有得到填充.row，但我想添加列，一旦我这样做，填充就回来了。

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

一个例子：

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

14 回答 14

134

您还应该为每个容器添加一个“行”，这将“解决”这个问题！

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

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

于 2014-08-21T13:36:39.267 回答
54

5 年多过去了，奇怪的是那里有这么多不遵循（或反对）引导规则或实际上没有回答问题的答案......
（有关这些错误的详细信息，请查看最后一节这个答案）

简短回答：
只需在行中使用 Bootstrap 的no-gutters(Bootstrap 4) 或g-0(Bootstrap 5) 类来删除填充：

  <div class="container-fluid">
    <!-- For Boostrap 4, use this instead:
    <div class="row no-gutters">-->
    <div class="row g-0">
      <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>到文件的末尾。它也在上面的代码中修复）

笔记：

在某些情况下，您还想删除容器本身的填充。在这种情况下，请考虑按照文档的建议删除.container或.container-fluid分类。

<!--<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 的文档中：

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

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

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

关于丢弃容器：

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

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

  • 避免破解引导程序的容器类，而不是确保将所有内容放入col-s 并用 -s 包装它们，row如文档所述：

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

  • 如果您仍然需要进行 hack（以防万一有人已经搞砸了并且您需要快速解决您的问题），请考虑使用 Bootstrappx-0来删除水平填充pl-0 pr-0或重新设计您的样式。
于 2019-01-10T15:44:40.517 回答
35

请从 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类作为子元素时，它会被删除。

于 2014-08-22T00:53:47.263 回答
20

所以这里是 Bootstrap 4 的简要总结：

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

这个对我有用。

于 2019-06-10T12:59:38.990 回答
14

我想我和蒂姆有同样的要求，但没有一个答案提供“具有正常内部排水沟的视口边到边列”解决方案。或者换一种说法：我怎样才能让我的第一列和最后一列进入容器填充并流到视口的边缘，同时仍然保持列之间的正常排水沟。

全宽行

据我所知，没有整洁干净的解决方案。这对我有用，但它远远超出了 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">…&lt;/div>
      <div class="col-sm-4 col-md-3">…&lt;/div>
      <div class="col-sm-4 col-md-3">…&lt;/div>
      <div class="col-sm-4 col-md-3">…&lt;/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-fluidas相同.container。

于 2016-02-04T04:41:32.333 回答
7

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

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

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

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

于 2018-09-16T21:21:03.363 回答
4

您只需要在 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;
}
于 2017-05-29T02:54:00.133 回答
3

在新的 alpha 版本中，他们引入了实用间距类。如果您以巧妙的方式使用它们，则可以调整结构。

间距实用程序类

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

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

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

版本差异

另请注意，实用程序间距类自 version 以来已更改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-5padding-top 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; }
于 2017-06-29T15:12:27.483 回答
3

使用px-0和去除填充container物。no-guttersrow

引自Bootstrap 4 - 网格系统：

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

列具有水平填充以在各个列之间创建装订线，但是，您可以.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。

于 2020-07-26T18:09:11.340 回答
2

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

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

  1. 然后在 css 部分使用特异性执行此操作：

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

这将 100% 工作，并将从左侧和右侧移除填充。我希望这有帮助。

于 2019-02-06T01:28:21.480 回答
1

我用过<div class="container-fluid" style="padding: 0px !important"> ，它似乎工作。

于 2018-05-10T03:42:16.220 回答
1

我为此苦苦挣扎，并意识到在我的场景中，解决方案是简单地移除<div class="container-fluid"> ... </div>信封。现在我只有：

<main role="main" class="flex-shrink-0">
    <?= $content ?>
</main>

澄清一下，div 包含了 $content（而不是 main）。

于 2021-12-24T21:25:50.930 回答
1

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

于 2015-09-21T08:23:44.677 回答
0

我自己一直在努力解决这个问题，我终于相信我已经弄清楚了。令人难以置信的是，这个问题有多少失败的答案

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

通过将以下内容添加到我的 css 文件中，我在自己的项目中做了一些草率的操作：

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

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

我只是有不同的 col 尺寸来解释我正在使用的所有不同的 col 尺寸。我相信有一种更简洁的方式来编写 css，但这说明了最终结果。

于 2019-04-01T04:16:50.650 回答