Bootstrap 4中margin:0设置无效问题求助

嘿，我之前也碰到过这个头疼的问题！结合你给出的代码，给你几个大概率能解决的方向：

1. 强制全局盒模型为border-box #

很多时候元素的实际宽度超出预期，是因为默认的content-box盒模型会把padding、border算在width之外。给所有元素统一设置盒模型：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这样能确保你设置的width:100%是包含padding和border的，不会因为额外的内边距/边框撑出边距。

2. 检查viewport元标签（移动端场景） #

如果是在移动端出现这个问题，很大概率是没设置viewport，导致浏览器默认缩放页面，出现左右边距。在html的<head>里加上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签能让页面宽度适配设备屏幕，避免默认的缩放带来的边距问题。

3. 给fixed定位的元素添加left/right:0 #

你的header用了position: fixed和width:100%，有时候浏览器的计算会有偏差，直接用left:0; right:0代替width:100%，能更精准地让元素铺满屏幕：

.header {
  background: black;
  height: 60px;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  /* 去掉width:100%，用left+right来铺满 */
}

同样，footer也可以用这个方式来避免边距。

4. 排查是否有隐藏的滚动条或overflow问题 #

有时候页面内容超出视口会出现滚动条，导致fixed元素的width:100%和视口宽度不匹配。可以检查body的overflow设置：

body {
  overflow-x: hidden; /* 暂时隐藏水平滚动条，排查是否是内容溢出导致的边距 */
}

如果加上这个后边距消失了，说明你页面里有元素宽度超出了视口，需要找到那个元素调整它的宽度。

你可以先试试这几个方法，一般都能解决问题！

内容的提问来源于stack exchange，提问作者Black