我在将一些导航栏元素定位在基于 bootstrap 3 容器的导航栏中时遇到了问题。
我附上了一张图片，它应该显示我希望导航栏的样子:
我在左侧有文本 Logo ，显示效果很好，右侧的用户下拉菜单也很好。
我不确定如何在图像中显示的那个位置包含一个带有图标的搜索框，以及为什么我的代码中的“铃铛”悬停状态及其下拉列表显示不与导航栏的底部边框齐平？
右侧的用户下拉菜单也没有显示其与底部导航栏齐平的高度，那里有 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>最佳答案
问题是带有类 dropdown 的 li 标签包含响铃图标以及其他标签的高度不同，这会导致错位。所以，我使用 flexbox 来修复对齐(因为它是最简单的解决方案)。为了在顶部获得红色通知，我使用绝对位置，并设置 top: 12px(您可以根据自己的意愿调整 top、left、right 来定位通知)。只需在您的 css 文件末尾添加以下样式即可查看更改
li.dropdown {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 11px;
margin-right: 85px;
}
.label {
position: absolute;
top: 12px;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 10px 19px;
}
#search-container {
width: 300px;
}
对于搜索栏，在包含铃铛图标的 li 之前添加以下 li 标签
<li class="dropdown">
<div class="input-group" id="search-container" >
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
这是我的 JSBin相同的代码。在那里查看输出。我希望它有所帮助!不懂就问。
关于html - Bootstrap 导航栏未正确定位某些元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36825550/