使用旧版Bootstrap时nav与div设置同色值背景色显示不一致如何解决

• 核心原因是旧版 Bootstrap 自带的 .navbar-default 类默认包含了线性渐变背景、默认浅灰色填充、边框和阴影样式，这些样式的优先级高于你给父元素 <header> 设置的行内背景色，导致导航区域实际显示的是渐变叠加后的效果，和下方纯 #D3D3D3 填充的 <div> 视觉效果存在差异。
• 次要问题是你的 HTML 代码存在语法错误：导航切换按钮的标签内多了一个多余的双引号（<button " type="button" 中的额外引号），可能引发交互或样式异常。

1. 覆盖 Bootstrap 默认导航栏样式，你可以选择两种方式实现：
   • 方式1：在你自定义的 css/styles.css 文件中添加如下代码：

   .navbar-default {
     background: #D3D3D3;
     border: none;
     box-shadow: none;
   }
   

   • 方式2：直接给导航元素加行内样式，修改 <nav> 标签为：

   <nav id="header-nav" class="navbar navbar-default" style="background:#D3D3D3;border:none;box-shadow:none;">
   

2. 修复 HTML 语法错误，将导航按钮的错误代码 <button " type="button" 中的多余引号删除，修正为：

   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
   

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