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

时间：2014-08-21 13:19:23

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-4

我希望我的内容流畅，但是当使用.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，linke 1427＆amp; 1428（v3.2.0）

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

到

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

13 个答案:

答案 0 :(得分：115)

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

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

请参阅http://jsfiddle.net/3px20h6t/

答案 1 :(得分：27)

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

答案 2 :(得分：12)

我认为我有与蒂姆相同的要求，但没有一个答案提供了具有正常内部排水沟的“视口”边缘到边缘的列＆＃39;解。或者换句话说：如何让我的第一列和最后一列进入容器填充并流向视口的边缘，同时仍保持列之间的正常排水沟。

full width rows

据我所知，没有整洁干净的解决方案。这对我有用，但它远远超出了Bootstrap所支持的任何东西。但它现在有效（Bootstrap 3.3.5＆amp; 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的作用相同。

答案 3 :(得分：5)

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

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

  <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的documentation中：

  

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

有关解决方案的信息，也已记录在案：

  

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

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

  • 避免黑客引导程序的容器类，而不要确保已将所有内容放入col-s中，并用row-s包裹它们，如documentation所说：
  

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

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

答案 4 :(得分：3)

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

答案 5 :(得分：3)

在新的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个破折号分开之前，例如=＆GT; 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; }

答案 6 :(得分：3)

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

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

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

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

答案 7 :(得分：1)

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

答案 8 :(得分：1)

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

答案 9 :(得分：1)

我认为没有人对这个问题给出正确的答案。 我的工作解决方案是： 1.只需声明另一个类以及容器流体类example（.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％起作用，并将删除左右两侧的填充。 我希望这会有所帮助。

答案 10 :(得分：1)

这是Bootstrap 4的简要摘要：

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

对我有用。

答案 11 :(得分：0)

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

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

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

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

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

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

答案 12 :(得分：0)

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

引用Bootstrap 4 - Grid system：

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

列具有水平填充，可在两列之间创建装订线 但是，您可以从行和行中删除边距 从.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删除填充。

相关问题
最新问题