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

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。如果全部为零，那么您只需调整 .container 或 .container 流体，左侧和右侧填充为零，但如果您使用不同的值 > 15px L & R，那么情况就不同了，因为

.container/.container-fluid

需要如果列的左右内边距大于 15px，则需要调整。

col-*-*

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

如果您想要紧密的网格，请删除所有列类的 left 和 right 上的所有填充，然后 remove .row 的 left 和 right 上的 negative

margin

，然后您可以删除 .container 上的左右

padding

。

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

删除所有填充和负边距，以实现紧密网格和 .container 的全宽以及具有类

.alt-grid

:

的任何周围元素（body、html 等）

.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（container-fluid、html、body）并不是最好的选择。我认为最好创建一个单独的类并将其添加到元素中。 如果您想删除所有边距：

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

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

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

Answer 3

向要消除边距的元素添加自定义类始终是比覆盖所有引导元素更好的方法。

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

Answer 4

在添加容器流体、容器等的地方添加 m-0 p-0。

对于 Bootstrap 和其他内联框架，除非您提及，否则外部 CSS 将不起作用！重要。

到处提及“重要”很麻烦。

改为使用 - https://getbootstrap.com/docs/5.3/utilities/spacing/