twitter-bootstrap Twitter Bootstrap 导航栏浮动向右移动 div 到新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18900593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap navbar float right moves div to new line
提问by alchuang
Hello I'm trying to create a section on the right of the navbar. I used the div class navbar-right which should float the div to the right, but I am getting a new line instead.
您好，我正在尝试在导航栏右侧创建一个部分。我使用了 div 类 navbar-right ，它应该将 div 浮动到右侧，但我得到了一个新行。
See below for code & thanks!
请参阅下面的代码&谢谢！
<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>
回答by KyleMit
In order to be placed at the top level of nav-bar, the contents must be placed inside of a div with the class: navbar-header
为了放置在导航栏的顶层，内容必须放置在具有类的 div 内： navbar-header
So instead of declaring the logout link inside of the div:
因此，不要在 div 中声明注销链接：
<div class="navbar-right">
Use the following classes instead:
请改用以下类：
<div class="navbar-header pull-right">
Since you'll want the Brandto pull-left, you can place two navbar-headerdivs right next to each other at the very top and have one pull to each direction. Like this:
由于您需要Brandto pull-left，您可以将两个navbar-headerdiv 并排放置在最顶部，并向每个方向拉一个。像这样：
<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
js小提琴
Expanded
展开
Collapsed
折叠
Update: As per Ram's comment, in order to not have the pull down menu not overlap on a small screen, you'll have to clear the left float like this:
更新：根据 Ram 的评论，为了不让下拉菜单在小屏幕上重叠，您必须像这样清除左浮动：
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
回答by devo
Instead of,
代替，
<div class="navbar-right">
<p>
<b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
</p>
</div>
Use,
利用，
<p class="pull-right">
<b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
</p>
