您好,我正在尝试在导航栏右侧创建一个部分。我使用了 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">
因为你会想要Brand
to pull-left
,你可以放置两个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>
jsFiddle http://jsfiddle.net/KyleMit/RxguB/
Expanded
倒塌
Update:
根据 Ram 的评论,为了不让下拉菜单在小屏幕上重叠,您必须像这样清除左侧浮动:
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)