带有网格的 Bootstrap 3、4 和 5 .container-fluid 添加了不需要的填充

Posted 2023-03-05

【中文标题】带有网格的 Bootstrap 3、4 和 5 .container-fluid 添加了不需要的填充

【英文标题】：Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding

【发布时间】：2014-10-15 03:36:24

【问题描述】：

我希望我的内容是流畅的，但是在将 .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，链接 1427 和 1428 (v3.2.0)

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

到

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

【问题讨论】：

可能有用leejacksondev.com/…

您能否发布相关代码，以便我们根据您的代码定制答案？

已更新代码！我想在有列时删除填充，而不仅仅是在使用行时。

它的解决方案不正确！我建议转到@part 答案

【参考方案1】：

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

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

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

【讨论】：

谢谢。我要做的是在使用列时删除填充。关于如何做到这一点的任何想法？

这只能通过一个额外的类来实现......我已经定义了一个名为 remove-padding 的类，它只有一个 .remove-padding padding-left: 0;填充权：0；左边距：0； margin-right: 0 据我所知，没有预定义的类可以删除默认的 15px 填充

我不明白这个答案怎么会有这么多赞成票，而它不遵循引导网格系统指南。 Introduction section 中的第三条规则规定 “内容应放置在列中，并且只有列可以是行的直接子级。” Lucas Nelson 的回答提供了一种公平的方法来实现所需的效果而不会破坏语法规则。

如果您的布局适合，您也可以直接将row 类与col-**-* 类一起使用。

当它没有回答问题时，它怎么能被投票 87 次（并且还在计数）？问题表明它仅在使用 row 时有效......但在使用列时 not （在此答案中忽略了该事实）？无论如何，我得到了与问题概述完全相同的错误 15px 填充，这非常令人沮丧。

【参考方案2】：

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>。上面的代码也已修复）

注意：

在某些情况下，您还想删除容器本身的填充。在这种情况下，请考虑按照documentation 的建议删除.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 的documentation：

行是列的包装。每列都有水平填充 （称为排水沟）用于控制它们之间的空间。这个填充 然后在具有 negative 边距的行上抵消。这样一来，所有 列中的内容在视觉上是靠左对齐的。

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

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

关于丢弃容器：

需要无边框设计？删除父 .container 或 .container-fluid.

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

避免入侵引导程序的容器类，而不是确保您已将所有内容放入 col-s 并用 row-s 包装它们，正如 documentation 所说：

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

如果您仍然需要做 hack（以防有人已经搞砸了事情并且您需要快速解决您的问题）考虑使用 Bootstrap 的 px-0 来删除水平填充而不是 pl-0 pr-0 或重新设计您的样式。

【讨论】：

.container-fluid 仍然包含padding-right: 15px 和padding-left: 15px，这意味着您仍然无法使用您的方法与窗口齐平。您仍然需要执行类似container-fluid px-0 的操作。

在这种情况下，文档建议直接使用"Drop the parent .container or .container-fluid."。我也将其包含在答案中。

依次丢弃容器会使行稍微溢出。删除行上的负右边距可以修复溢出，但会弄乱布局。最后我没有找到其他方法，只能在容器上设置padding: 0; overflow-x: hidden。

no-gutters 对我的容器流体布局没有影响。 Bootstrap 5 似乎没有关于如何使用容器流体的说明。我想要具有固定最大宽度的 div（卡片）展开（对齐）以填充视口宽度，并且在没有足够的水平空间时挤在一起。我不得不花费数小时添加 CSS，但仍然没有得到我想要的。

通过使用具有“d-flex justify-content-evenly”类的行和具有固定宽度的卡片，我在使用容器流体方面取得了一些成功。没有“col” div。这些卡片的空间可以漂亮地扩大到 md 宽度甚至更大，但在手机宽度下可以很好地压缩。

【参考方案3】：

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

【讨论】：

非常感谢。不过，我想在使用列时将其删除。我真的不想弄乱核心引导 css。我怀疑必须有一种认可的方式来做到这一点。有什么想法吗？

如果要使用全角列，可以在行内应用 col-md-12 col-sm-12 css

谢谢。我试过了，但我仍然得到填充。另外，我需要两列。我错过了什么吗？

您看到的填充是 Bootstrap 的默认值，如果您想摆脱它，如何添加自己的类。当您添加新类并想要覆盖引导程序时，您可以添加!important 在样式之后。

如果有两列，您可以将此类添加到您的列 col-md-6

【参考方案4】：

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

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

它对我有用。

【讨论】：

对于 Bootstrap 4，这是正确答案和最佳实践。

@SyafiqZainal，这也是我在下面的原始答案的重复（更早发布）：D 所以，现在我想知道，是否可以发布相同的在 *** 中回答。

这也是正确答案。 px-0 从容器流体中删除填充。关于从列中删除排水沟，这也是正确的答案。

对我有用的是px-0，这应该是IMO的正确答案。

这对我来说是 BS4 中的圣杯，但它不再适用于 BS5 :(

【参考方案5】：

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

据我所知，没有整洁干净的解决方案。这对我有用，但它远远超出了 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 的作用相同。

【讨论】：

为什么不只是.full-width-row > div padding: 0;

它不起作用，你仍然在行的开头和结尾得到一个装订线：bootply.com/eM8y3kkfbi

这很愚蠢，但使用overflow: hidden 确实是我发现的唯一方法，可以只删除容器填充而不添加水平滚动或弄乱布局。

【参考方案6】：

为什么不通过将左右填充标记为 0 来否定 container-fluid 添加的填充？

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

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

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

【讨论】：

pl-0 pr-0可以改成px-0

【参考方案7】：

你只需要 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;

【参考方案8】：

在新的 alpha 版本中，他们引入了utility spacing classes。 如果您巧妙地使用它们，则可以调整结构。

间距实用程序类

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

【参考方案9】：

在container 上使用px-0 和在row 上使用no-gutters 删除填充。

引用Bootstrap 4 - Grid system:

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

列具有水平填充以创建间距 但是，您可以从行中删除边距并 在.row 上使用.no-gutters 填充列。

以下是现场演示：

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 的填充。

【参考方案10】：

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

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

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

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

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

【讨论】：

px-0 为 Bootstrap 4 设置左右填充怎么样

【参考方案11】：

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

【参考方案12】：

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

【讨论】：

可以避免样式，而是添加实用程序类p-0

【参考方案13】：

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

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

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

【参考方案14】：

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

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

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

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


.container-fluid 
    padding: 0!important;

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