导航栏样式异常求助：实际显示与期望样式不符

嘿，我看了你的导航栏问题——当前用navbar-default渲染出的是浅灰背景、深色文字的默认样式，而你想要的是深色背景搭配浅色文字的导航栏效果，这就来帮你搞定！

第一步：先修复汉堡菜单的小bug #

你代码里的汉堡按钮data-target属性多写了一个#，写成了##bs-example-navbar-collapse-1，这会导致移动端点击汉堡菜单时没法展开列表，先把它改成正确的：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

第二步：快速切换到期望的基础样式 #

Bootstrap自带了navbar-inverse类，正好就是深色背景+浅色文字的导航栏样式，完美匹配你想要的效果！只需要把原来的navbar-default替换成navbar-inverse就行：

<nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

第三步：自定义细节让样式更贴合 #

如果替换类之后，还想调整导航栏高度、文字间距或者品牌名称的样式，可以加一段自定义CSS来优化：

/* 调整导航栏整体高度 */
.topnav .navbar {
    min-height: 60px;
}
/* 优化品牌名称的 padding 和字体大小 */
.topnav .navbar-brand {
    padding: 20px 15px;
    font-size: 1.5em;
    color: #ffffff !important;
}
/* 调整导航项的内边距和 hover 效果 */
.topnav .navbar-nav > li > a {
    padding: 20px 15px;
    color: #dddddd !important;
    transition: color 0.3s ease;
}
.topnav .navbar-nav > li > a:hover {
    color: #ffffff !important;
}

把这段CSS放到你的样式文件里，或者页面的<style>标签中，就能让导航栏的细节更贴近你期望的样子啦。

做完这些修改后，刷新页面就能看到和你目标样式一致的导航栏了，移动端的汉堡菜单也能正常工作哦～

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