我正在尝试弄清楚如何实现“无冲突”两行 bootstrap-3 固定顶部导航栏。根据 Bootstrap 定义，我不确定它是否真的需要两个实际的“导航栏”。我很擅长编码，但还没有完全理解 Bootstrap 框架(只有几个月的专注工作)，所以我在这里有点挣扎。
最理想的情况是，顶行的背景颜色为#f2f2f2，左侧为品牌/ Logo ，右侧为警告图标，例如消息图标、通知图标和个人资料图标。我无法弄清楚的一件事是将这些图标制作成下拉菜单，这些图标不会被下面的菜单隐藏，因为我对两个菜单行都使用了 Bootstrap 导航栏类。
第二行的背景为#337ab7，左侧是“页面标题”标题，右侧是下拉导航项。我已经创建了一个基本概念并将其附在此处以便更好地可视化。
我最大的问题之一是我一辈子都想不出如何正确更改 Bootstrap 中的下拉菜单样式以匹配我所附的概念。我只想要一个没有圆 Angular 的基本平面下拉菜单，似乎谷歌搜索“如何自定义 Bootstrap 下拉菜单”(以各种形式)让我了解基本的着色但没有完全检修。
我的代码缺少一些东西，默认链接颜色在被点击后变成灰色，而且整体表现很奇怪。所以我希望在这里有一个新的开始。我真的很感激这里的一些帮助，因为几天来我一直在努力让这件事发生。我可以共享代码，但由于我的反复试验，它非常丑陋。感谢你们提供的任何帮助! 
最佳答案
这是您尝试执行的操作的示例。它并不能满足您的所有需求，但有望帮助您入门。
上部区域(在主 nav 之上)只是一个被 navbar 类和一个 container 包围的 div，都是标准的 Bootstrap Nav元素。在我看来，主要是 CSS 和了解如何使用这些组件。
希望对您有所帮助。
body,
html {
margin-top: 100px;
}
.navbar.navbar-custom {
border-radius: 0px;
border-left: transparent;
background: #337ab7;
}
.navbar-custom .upper-nav {
font-size: 20px;
padding: 9px 20px;
height: 50px;
color: #337ab7;
background-color: #f2f2f2;
}
.navbar-custom .upper-nav img {
margin-top: 0px;
}
.navbar-custom .navbar-nav {
margin-right: 30px;
}
.navbar-custom .nav-buttons {
border-radius: 0px;
background: none;
border: none;
color: #337ab7;
}
.btn-group .dropdown-menu > li > a {
color: #fff;
}
.btn-group .dropdown-menu > li > a:hover {
color: #444;
}
.navbar-custom .navbar-nav .dropdown-toggle {
color: #fff;
}
.navbar-custom .navbar-nav > li > a {
border-right: 1px solid #fff;
}
.navbar-custom .navbar-nav > li:first-child {
border-left: 1px solid #fff;
}
.navbar-custom .navbar-header .navbar-brand {
color: #fff;
}
.navbar-custom .dropdown-menu {
background: #444;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a,
.navbar-custom .navbar-nav .open .dropdown-menu {
color: #fff;
border-bottom: 1px solid #fff;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu:hover {
color: #444;
}
.wrapper {
height: auto;
background-color: #fff;
margin-top: 0px;
padding: 10px 20px;
}
.well {
background-color: transparent;
border: 3px solid #428bca;
border-radius: 0px;
text-align: center;
font-size: 25px;
}
@media (max-width: 768px) {
.navbar-custom .navbar-nav {
margin-right: 0;
}
.navbar-custom .navbar-nav > li > a {
color: #fff;
border: none;
}
.navbar-custom .navbar-nav > li:first-child {
border: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
<div class="upper-nav">
<img src="http://placehold.it/150x30/444/fff?text=Logo">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" </span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
</ul>
</div>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-inbox" </span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
</ul>
</div>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-off" </span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
</ul>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href="#">Page Title</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menun Item 1</a>
</li>
<li><a href="#">Menun Item 2</a>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menun Item 1</a>
</li>
<li><a href="#">Menun Item 2</a>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menun Item 1</a>
</li>
<li><a href="#">Menun Item 2</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div class="wrapper">
<div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet
facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur
auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor
egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p>
<p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros
aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique
fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p>
<p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque
sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies
arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat
vestibulum eu sit amet urna.</p>
<p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim
neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim
tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p>
<p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc
consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo
lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p>
</div>关于jquery - Bootstrap 中的自定义两行导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32023063/