CSS 引导容器流体 - 以正确的方式删除边距（溢出）

bootstrap container-fluid - remove margins the right way (overflow)

提问by niksos

How can I remove all margins from boostrap container-fluidclass and its rows?

如何从 boostrapcontainer-fluid类及其行中删除所有边距？

.container-fluid { padding: 0;}

This does basically what I want, but it adds 20px overflow to body. So should I just do this:

这基本上符合我的要求，但它为 body 增加了 20px 溢出。所以我应该这样做：

body, html { overflow-x: hidden; }

Do something with .container-fluid > .row

做点什么 .container-fluid > .row

回答by Christina

To be specific about your question:

要具体说明您的问题：

The .rowhas a negative left and right margin equal to the left/right padding value of the col-*-*, that is why there are horizontal scrollbars when you fiddle with the grid without understanding how it works. If you manipulate the column classes with zero padding on the left and right or with some other value, the negative margin on the .row must be equal to the the padding on the left and right of the column classes. The .container also has padding that matches the value of the column classes to prevent the scrollbars.

该.row具有负左，右页边距等于的左/右填充值col-*-*，这就是为什么有水平滚动条，当你与电网拨弄不理解它是如何工作的。如果您在左侧和右侧使用零填充或使用其他值操作列类，则 .row 上的负边距必须等于列类左侧和右侧的填充。.container 还具有与列类的值匹配的填充，以防止滚动条。

So the answer is: .container-fluid > .row-- make the margin:0 on the left and right if you remove the padding on the left and right of the column classes. If all is zero, then you can just adjust the .container or .container fluid with zero padding on the left and right, but if you use different values > 15px L & R, then it's a different story as the .container/.container-fluidwill need to be adjusted if the left and right padding on the columns is greater than 15px.

所以答案是： .container-fluid > .row-- 如果删除列类左侧和右侧的填充，则使左侧和右侧的边距：0。如果全部为零，那么您可以调整 .container 或 .container 流体，并在左侧和右侧使用零填充，但如果您使用不同的值 > 15px L & R，则情况不同，因为.container/.container-fluid需要调整如果列的左右内边距大于 15px。

There are no margins on the col-*-*it's padding which is quite different when you use box-sizing:border-box globally as Boostrap 3 does.

col-*-*当您像 Boostrap 3 那样全局使用 box-sizing:border-box 时，它的填充没有边距，这完全不同。

If you want a tight grid, remove all padding on the leftand rightof all column classes and then removethe negativemarginon the leftand rightof the .row, and then you can remove the left and right paddingon the .container.

如果你想要一个紧的网格，删除所有填充在左侧和右侧的所有列类，然后删除该负缘上的左和右的.row，然后你可以删除左右边距上.container。

DEMO: http://jsbin.com/jeqase/2/

演示：http: //jsbin.com/jeqase/2/

Removes all padding and negative margin for a tight grid and full width of the .container with any surrounding element (body, html, whatever) with the class .alt-grid:

使用 class 删除带有任何周围元素（body、html 等）的 .container 的紧密网格和全宽的所有填充和负边距.alt-grid：

.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}

/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}

You can also do this with .container-fluid- the only thing to zero out is the left and right padding.

您也可以这样做.container-fluid- 唯一要清零的是左右填充。

回答by Pracede

If you want to remove margin, overidding the Bootstrap class or div (container-fluid, html, body) is not the best thing to do. I think it's better to create a separate class and add it in elements. If you want to remove all margins :

如果您想删除边距，覆盖 Bootstrap 类或 div（容器流体、html、正文）并不是最好的做法。我认为最好创建一个单独的类并将其添加到元素中。如果要删除所有边距：

.remove-all-margin{
margin:0 ! important;
}

If you want to remove all margins and paddings :

如果要删除所有边距和填充：

.remove-all-margin-padding{
margin:0 ! important;
padding:0 ! important;
}

回答by Leigh Cheri

it is always a better way to add a custom class to the elements that you want to get rid of the margins rather than overriding all bootstrap elements.

向要去除边距的元素添加自定义类总是更好的方法，而不是覆盖所有引导程序元素。

row.no-margin{ margin:0 ! important; }

row.no-margin{ margin:0 ! important; }