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

如何从boostrap

container fluid

类及其行中删除所有边距

.container-fluid { padding: 0;}

这基本上就是我想要的，但它会给身体增加20px的溢出。所以我应该这样做：

body, html { overflow-x: hidden; }

---

使用

.container fluid>.row

执行某些操作如果要删除边距，避免引导类或div（container fluid、html、body）过大不是最好的做法。我认为最好创建一个单独的类并将其添加到元素中。 如果要删除所有页边距：

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

如果要删除所有边距和填充，请执行以下操作：

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

---

要具体说明您的问题：

.row

的左右边距为负值，等于

列-*-*

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

因此答案是：

.container fluid>.row

——如果删除列类左侧和右侧的填充，则在左侧和右侧设置边距：0。如果全部为零，则只需调整左右两侧填充为零的.container或.container流体，但如果使用不同的值>15px L&R，则情况不同，因为如果列上的左右填充大于15px，则需要调整

.container/.container流体

列-*-*
上没有边距，这与Boostrap 3全局使用框大小：边框框时大不相同

如果您想要一个紧凑的网格，请删除所有列类的左和右上的所有填充，然后删除
行的左和右上的负边距，然后可以删除
容器上的左右填充

演示：

使用类
.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
-唯一要调零的是左右填充。
将自定义类添加到要去掉边距的元素，而不是覆盖所有引导元素，这始终是一种更好的方法

row.no-margin{
边距：0！重要；
}
嗨@Christina，你的“拉小提琴，jsBin，CodePen”（bio）已经不起作用了（404）。5年后，你仍然是个英雄，Christina！还是沃克斯。呜！谢谢@Christina，对我来说它工作了
。容器{width:100%；max width:none；padding left:0；padding right:0}