你好,我想在导航栏的右侧创建一个部分.我使用了div类navbar-right,它应该将div浮动到右边,但是我正在换一个新行.
见下面的代码&谢谢！
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.PHP">xxx</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.PHP">Home</a></li>
<li><a href="about.PHP">About</a></li>
<li><a href="contact.PHP">Contact</a></li>
</ul>
</div>
<div class="navbar-right">
<p>
<b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.PHP>logout</a>
</p>
</div>
</div>
</div>
解决方法
为了放置在导航栏的顶层,内容必须放在一个div的内部,类别是：navbar-header
所以,而不是声明div中的注销链接：
<div class="navbar-right">
使用以下类：
<div class="navbar-header pull-right">
由于您需要左侧的品牌,您可以将两个navbar-header div放在最上方,并向每个方向拉一个.喜欢这个：
<div class="navbar-header pull-left">
<a class="navbar-brand" href="index.PHP">xxx</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-text">
<b> '.$username.' </b>
<a href="logout.PHP" class="navbar-link">logout</a>
</p>
</div>
扩展
倒塌
更新：
根据Ram的评论,为了不让下拉菜单在小屏幕上不重叠,您必须清除左边的浮动像这样：
.navbar-collapse.in,.navbar-collapse.collapsing {
clear: left;
}
