Question

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

.container-fluid { padding: 0;}

这基本上是我想要的，但它增加了20px溢出到身体。我应该这样做：

body, html { overflow-x: hidden; }

使用.container-fluid > .row

执行某些操作

Answer 1

具体说明您的问题：

.row的左右边距为负，等于col-*-*的左/右填充值，这就是为什么当您在不理解网格的情况下摆弄网格时存在水平滚动条的原因。如果在左侧和右侧使用零填充或使用其他值操作列类，则.row上的负边距必须等于列类左侧和右侧的填充。 .container还具有与列类的值匹配的填充以防止滚动条。

所以答案是：.container-fluid > .row - 如果删除列类左侧和右侧的填充，则左边和右边的边距为0。如果all为零，那么您只需调整.container或.container流体，左右填充零填充，但如果使用不同的值＆gt; 15px L＆amp; R，那么这是一个不同的故事，因为如果列上的左右填充大于15px，则需要调整.container/.container-fluid。

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

如果您需要紧密网格，请删除所有列类的左侧和右侧上的所有填充，然后删除 .row的左侧和右侧上的否定 保证金，然后您可以删除左侧和右侧< .container上的em> padding 。

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

使用类.alt-grid的任何周围元素（正文，html，等等）移除.container的紧网格和全宽的所有填充和负边距：

.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;}

您也可以使用.container-fluid执行此操作 - 唯一要归零的是左右填充。

Answer 2

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

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

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

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

Answer 3

将自定义类添加到要删除边距而不是覆盖所有引导元素的元素总是更好的方法。

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

bootstrap container-fluid - 正确删除边距（溢出）

3 个答案: