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

Question

提问by Tim

I'd like my content to be fluid, but when using .container-fluidwith Bootstrap's grid, I'm still seeing padding. How can I get rid of the padding?

我希望我的内容流畅，但是在使用.container-fluidBootstrap 的网格时，我仍然看到填充。我怎样才能摆脱填充？

I see that I don't get the padding with .row, but I want to add columns, and as soon as I do, the padding is back :O.

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

I want to be able to use the columns at full width.

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

An example:

一个例子：

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

Solution I've got:

我有解决方案：

Override bootstrap.css, linke 1427 & 1428 (v3.2.0)

覆盖 bootstrap.css、链接 1427 和 1428 (v3.2.0)

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

to

到

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

Answer 1

回答by PArt

You should also add a "row" to each container which will "fix" this issue!

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

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

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

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

Answer 2

回答by Kishore Kumar

Please find the actual css from Bootstrap

请从 Bootstrap 中找到实际的 css

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

When you add a .container-fluidclass, it adds a horizontal padding of 15px, and the same will be removed when you add a .rowclass as a child element by the negative margin set on row.

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

Answer 3

回答by Just Shadow

5 years passed, and it's quite strange that there are so many answers there which don't follow(or are against) bootstrap rulesor don't actually answer the question...

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

Short Answer:
Simply use Bootstrap's no-guttersclass in your row to remove padding:

简短回答：
只需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>

(Also you've forgotten to add </div>to the end of your file. It's fixed in the code above as well)

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

Note:

笔记：

There are cases when you want to removethe padding of the container itself as well. In this case consider dropping .containeror .container-fluidclasses as recommended by the 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>-->

Long Answer:

长答案：

The paddings you get are actually documented in Bootstrap's documentation:

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

Rows are wrappers for columns. Each column has horizontalpadding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negativemargins. This way, all the content in your columns is visually aligned down the left side.

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

And about the solution, which was documented as well:

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

Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutterson the .row.

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

Regarding dropping the container:

关于丢弃容器：

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

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

Bonus: About the mistakes found on the other answers

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

Avoid hacking bootstrap's container classes instead of making sure that you've put all the content in col-s and wrapped them with row-s as documentationsays:

避免攻击引导程序的容器类，而不是确保您已将所有内容放在col-s 中并用 -s 包装它们，row如文档所述：

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

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

If you still have to do hack (just in case someone already messed up things and you need to quickly fix your issue) consider using Bootstrap's px-0for removing horizontal paddings instead pl-0 pr-0or reinventing your styles.

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

Answer 4

回答by Lucas Nelson

I think I had the same requirement as Tim, but none of the answers provide for a 'viewport edge-to-edge columns with normal internal gutters' solution. Or another way to put it: how can I get my first and last columns to break into the container padding and flow to the edge of the viewport, while still maintaining normal gutters between the columns.

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

From what I can tell, there is no neat and clean solution. This is what works for me, but it is well outside anything that would be supported by Bootstrap. But it works for now (Bootstrap 3.3.5 & 4.0-alpha).

据我所知，没有整洁干净的解决方案。这对我有用，但它远远超出了 Bootstrap 支持的任何内容。但它现在有效（Bootstrap 3.3.5 & 4.0-alpha）。

http://www.bootply.com/ioWBaljBAd

Sample HTML:

示例 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:

CSS：

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

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

The trick is to nest a divin between the row and the columns to generate the extra -15px margin to push into the container padding. The extra negative margin creates horizontal scroll (into whitespace) on small viewports. Adding overflow-x: hiddento the .rowis required to suppress it.

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

This works the same for .container-fluidas .container.

这.container-fluid与.container.

Answer 5

回答by Dm Mh

So here is the brief summary for Bootstrap 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>

It works for me.

这个对我有用。

Answer 6

回答by iCrus

Why not negate the padding added by container-fluidby marking left and right padding as 0?

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

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

even better way? no padding at all at the container level (cleaner)

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

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

Answer 7

回答by Aaron Nu?ez

You only need these CSS properties in .container class of Bootstrap and you can put inside him the normal grid system without someone content of the container will be out of him (without scroll-x in the viewport).

您只需要 Bootstrap 的 .container 类中的这些 CSS 属性，您就可以将正常的网格系统放入他的内部，而不会有人将容器的内容放在他的外面（在视口中没有 scroll-x）。

HTML:

HTML：

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

CSS:

CSS：

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

Answer 8

回答by Tim Vermaelen

In the new alpha versions they've introduced utility spacing classes. The structure can then be tweaked if you use them in a clever way.

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

Spacing utility 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-0and pr-0will remove leading and trailing padding from the columns. One issue left is the embedded rows of a column, as they still have negative margin. In this case:

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

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

Version differences

版本差异

Also note the utility spacing classes were changed since version 4.0.0-alpha.4. Before they were separated by 2 dashes e.g. => p-x-0and p-l-0and so on ...

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

To stay on topic for the version 3: This is what I use on Bootstrap 3 projects and include the compass setup, for this particular spacing utility, into bootstrap-sass(version 3) or bootstrap(version 4.0.0-alpha.3) with double dashes or bootstrap(version 4.0.0-alpha.4 and up) with single dashes.

继续讨论第 3 版：这是我在 Bootstrap 3 项目中使用的内容，并将指南针设置（针对此特定间距实用程序）包含到bootstrap-sass（第 3 版）或bootstrap（4.0.0-alpha.3 版）中，并带有双破折号或bootstrap（版本 4.0.0-alpha.4 及更高版本）带有单破折号。

Also, latest version(s) go up 'till 5 times a ratio (ex: pt-5padding-top 5) instead of only 3.

此外，最新版本的比率上升到 5 倍（例如：pt-5padding-top 5），而不是只有 3。

Compass

罗盘

$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 output

CSS 输出

You can ofcourse always copy/paste the padding spacing classes only from a generated css file.

您当然可以始终仅从生成的 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; }

Answer 9

回答by Sahil Kumar Singh

I think no one has given the correct answer to the question. My working solution is : 1. Just declare another class along with container-fluid class example(.maxx):

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

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

Then using specificity in the css part do this:

然后在 css 部分使用特殊性做到这一点：

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

This will work 100% and will remove the padding from left and right. I hope this helps.

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

Answer 10

回答by Dave

I have used <div class="container-fluid" style="padding: 0px !important">and it seems to be working.

我已经使用过<div class="container-fluid" style="padding: 0px !important">，它似乎有效。

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

提问by Tim

回答by PArt

回答by Kishore Kumar

回答by Just Shadow

回答by Lucas Nelson

回答by Dm Mh

回答by iCrus

回答by Aaron Nu?ez

回答by Tim Vermaelen

回答by Sahil Kumar Singh

回答by Dave

相关推荐

最近更新

标签

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

提问by Tim

回答by PArt

回答by Kishore Kumar

回答by Just Shadow

回答by Lucas Nelson

回答by Dm Mh

回答by iCrus

回答by Aaron Nu?ez

回答by Tim Vermaelen

回答by Sahil Kumar Singh

回答by Dave

相关推荐

twitter-bootstrap Bootstrap 词缀不保留列布局

twitter-bootstrap Bootstrap 导航栏固定底部粘性页脚

twitter-bootstrap bootstrap 导航栏顶部边框不同颜色

twitter-bootstrap 更改警报信息文本颜色

相关推荐

最近更新

标签