如何让Bootstrap网格的背景颜色延伸至页面边缘？

首先得点明你遇到的核心问题：Bootstrap的.container类天生带有左右内边距，且它的宽度是随响应式断点变化的固定值（并非100%占满视口），再加上浏览器默认给<html>和<body>元素添加了margin，导致你的#test元素背景只能覆盖container内部的网格区域，没法延伸到页面边缘。

给你几个针对性的解决方案，你可以根据实际需求选择：

方案1：用.container-fluid替换.container #

这是最直接的解决办法，.container-fluid是100%宽度的容器，没有固定的max-width限制，能直接铺满整个视口。

修改你的HTML（假设#test就是这个<main>元素）：

<main role="main" class="container-fluid" id="test">

然后简化你的CSS（background-size: cover对于块状元素来说没有实际作用，可以去掉）：

body { background-color: grey; } 
#test { background-color: yellow; }

方案2：给#test添加负margin抵消container内边距 #

如果你不想替换.container，可以给#test（包裹网格的.row或外层容器）添加负的左右margin，刚好抵消.container默认的15px左右内边距：

#test {
  background-color: yellow;
  margin-left: -15px;
  margin-right: -15px;
  /* 注意：如果#test是.row元素，它本身已经自带-15px margin，此时只需确保container没有额外限制即可 */
}

额外必做：清除浏览器默认边距 #

别忘了清除<html>和<body>的默认margin，不然页面最外层还是会出现一圈空白：

html, body {
  margin: 0;
  padding: 0;
}

哦对了，看你的原始代码里并没有id="test"的元素，一定要把这个id加到正确的容器上（比如<main>或.row），不然你的CSS规则根本不会生效哦😉

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