求助：Bootstrap 5.2添加背景色无效，CSS及bg类均不生效

安全阿岳

2026-8-8

以下是几个能快速定位并解决问题的方向：

确认CSS加载顺序：你的自定义样式文件必须放在Bootstrap CSS之后引入。如果Bootstrap样式后加载，哪怕加了!important也可能被覆盖。正确的引入顺序示例：
```
<link href="bootstrap.min.css" rel="stylesheet">
<link href="你的自定义样式文件.css" rel="stylesheet">
```
检查元素显示属性与父级样式：footer如果是行内元素（display:inline），背景色可能无法正常铺满；另外如果父元素设置了overflow:hidden，也可能导致footer被裁剪。可以强制设置footer为块级元素：
```
footer { 
  margin-top: 160%; 
  width: 100%; 
  display: block;
  background-color: #09249e !important;
}
```
利用开发者工具定位冲突样式：按F12打开浏览器开发者工具，选中footer元素，查看右侧Styles面板，找到被划掉的background-color规则，看是哪个选择器在覆盖它。可以用更具体的选择器提高权重，比如body footer或者给footer加个类名.site-footer，然后用.site-footer来写样式，比单纯的footer选择器权重更高。
排查margin-top的异常值：margin-top:160%这个值过大，可能导致footer被推到视口之外，你根本看不到它的背景色。先把这个值改成margin-top:2rem测试，如果背景色显示了，再根据页面布局调整合适的margin值。
内置类失效的额外排查：如果用bg-primary也没效果，检查是否修改了Bootstrap的Sass变量（比如$primary色值），或者有第三方样式覆盖了bg-*类的规则。同样用开发者工具查看Styles面板，确认bg-primary的background-color是否生效。