Bootstrap 导航栏未正确定位内部的某些元素
Posted
技术标签:
【中文标题】Bootstrap 导航栏未正确定位内部的某些元素【英文标题】：Bootstrap navbar not positioning some elements inside correctly 【发布时间】：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>【问题讨论】：
【参考方案1】：问题是li 类包含铃铛图标的li 标签以及另一个标签的高度不同，这会导致错位。所以，我使用 flexbox 来修复对齐（因为它是最简单的解决方案）。为了获得顶部的红色通知，我使用位置作为绝对位置，并设置top: 12px（您可以根据自己的意愿使用顶部、左侧、右侧来定位通知）。只需在您的 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 代码。查看那里的输出。我希望它有帮助！有什么不懂的就问吧。
【讨论】：
感谢您的帮助。我会试试这个，让你知道。使用通知徽章，最初是否可以隐藏，然后在发出通知时可见？我假设我可以用 jquery 做到这一点？ 乐于助人！是的，您最初可以通过将display: none 属性添加到 .label 来隐藏通知徽章，当您收到通知时，您当然可以使用 jQuery 将属性更改为 display:block。
哦，关于搜索框，我可以将那个字形图标更改为自定义搜索图像吗？我假设我可以简单地做到这一点......
是的，它相当简单。只需添加一个像 <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-128.png" height="16" width="16" > 这样的图像标签来代替类 .glyphicon-search 的 span 标签。
导航栏没有响应，因为首先你没有将div 包含在navbar-header 类中，它包含那个汉堡包图标。其次，您必须将 <ul> 包含在 div <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 内。 Hamburger 图标将从这个 div 中收集所有的东西，id 为#bs-example-navbar-collapse-1。所以这些是确保您的导航栏响应的必要内容。然后，您必须使用媒体查询根据屏幕尺寸设置元素的样式，以使导航栏完美。顺便说一句，我已将这些更改添加到 JSBin。以上是关于Bootstrap 导航栏未正确定位内部的某些元素的主要内容，如果未能解决你的问题，请参考以下文章