bootstrap container-fluid - 以正确的方式删除边距（溢出）

Posted 2023-03-05

【中文标题】bootstrap container-fluid - 以正确的方式删除边距（溢出）

【英文标题】：bootstrap container-fluid - remove margins the right way (overflow)

【发布时间】：2014-11-30 00:10:51

【问题描述】：

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

.container-fluid  padding: 0;

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

body, html  overflow-x: hidden; 

用.container-fluid > .row做点什么

【参考方案1】：

如果你想删除边距，覆盖 Bootstrap 类或 div（container-fluid、html、body）并不是最好的选择。我认为最好创建一个单独的类并将其添加到元素中。 如果要删除所有边距：

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

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

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

【参考方案2】：

具体说明您的问题：

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

所以答案是：.container-fluid > .row -- 如果删除列类左右两侧的填充，则在左侧和右侧设置 margin:0。如果一切都为零，那么您可以调整 .container 或 .container 流体，在左侧和右侧使用零填充，但如果您使用不同的值 > 15px L & R，那么情况就不同了，因为 .container/.container-fluid 需要列左右内边距大于15px时进行调整。

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

如果您想要一个紧凑的网格，请删除所有列类的左侧和右侧上的所有填充，然后删除 .row的left和right的负数 ma​​rgin，然后可以去掉左右 .container 上的填充。

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

使用类.alt-grid 删除所有周围元素（body、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 执行此操作 - 唯一要清零的是左右填充。

【讨论】：

嗨@Christina，您的“制作小提琴，jsBin，CodePen”（生物）不再起作用（404）。

5 年后，你仍然是英雄，克里斯蒂娜！ ???

仍然工作。哇！

谢谢@Christina，对我来说它有效.container width:100%;max-width:none ;padding-left:0;padding-right:0

【参考方案3】：

向想要去除边距的元素添加自定义类始终是一种更好的方法，而不是覆盖所有引导元素。

row.no-margin margin:0 ! important;