Bootstrap导航栏无法正常着色问题求助

嘿，我之前也踩过一模一样的坑！看了你的代码，首先发现一个超容易忽略的拼写错误——你写的navbar-ligt少了个字母h，应该是navbar-light。这个小失误会让Bootstrap的默认样式加载出现偏差，哪怕你加了!important也可能因为内置样式的优先级问题不生效。

给你几个具体的解决步骤：

• 先修正拼写错误：把navbar-ligt改成navbar-light，这一步很多时候就能直接解决问题，因为Bootstrap的导航栏样式完全依赖正确的类名来触发。
• 尽量少用!important，改用更具体的选择器：内联样式加!important虽然粗暴，但非常不利于后期维护。你可以把样式写到外部CSS文件里，用更具体的选择器来提升优先级，比如：

  .sticky-navigation.navbar.navbar-expand-md {
    background-color: green;
  }
  

  记得要把你的自定义CSS文件放在Bootstrap的CSS文件之后引入，这样相同权重的选择器，你的样式会自动覆盖Bootstrap的默认样式。
• 用浏览器开发者工具排查冲突：按F12打开开发者工具，选中导航栏元素，查看「样式」面板，看看哪个背景色样式在生效，被划掉的样式就是被其他规则覆盖的，这样能快速定位到冲突的根源。

如果修正拼写后还是不行，就用开发者工具找找是不是有其他自定义样式或者第三方插件的规则在抢优先级，针对性调整选择器权重就好啦。

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