【发布时间】：2016-08-17 22:58:33
【问题描述】：
我无法在基于 bootstrap 3 容器的导航栏中定位一些导航栏元素。
我附上了一张图片，它应该显示我希望我的导航栏的样子：
我在左边有文字标志，显示很好，右边的用户下拉菜单也很好。
我不确定如何包含一个搜索框，其图标位于图像中显示的那个位置，以及为什么我的代码中的“铃铛”悬停状态及其下拉列表不与导航栏的底部边框齐平显示？
右侧的用户下拉菜单也不显示其与底部导航栏齐平的高度，那里有大约 1px 的差异......
如果有最少的代码可以解决这个问题，以确保它也能在其他浏览器中兼容。
目前我的代码中的铃铛图标只是一个占位符，因为我需要显示自定义铃铛图标的图像，但也不确定如何在其顶部发出小通知，但是是的：/
无论如何，谢谢。
这是我的代码：
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 180px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
.glyphicon-bell {
font-size: 40px;
}
.user {
margin-left: 30px;
margin-right: 10px;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">BRAND LOGO TEXT HERE</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square"><span class="label label-info">32</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a>
</li>
<li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a>
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Username here</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li><a href="#">Action</a>
</li>
<li class="divider"></li>
<li><a href="#">Another action</a>
</li>
<li class="divider"></li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhsk</p>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css twitter-bootstrap