jQuery Bootstrap 3 - 导航中的项目浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22082181/
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
Bootstrap 3 - item float right in navigation
提问by NullCod3
This is my current navigation:
这是我目前的导航：
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ApplicationName</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="main-navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
</div>
</nav>
With this navigation I'm having this:
有了这个导航，我有这个：
What I actually want is this:
我真正想要的是这样的：
I've tried floating of the anchor tag but it's floating just inside the li tag. In ExtJS I'm having the '->' item which provides me this behavior. How can I do this?
我试过浮动锚标签，但它只是浮动在 li 标签内。在 ExtJS 中，我有 '->' 项，它为我提供了这种行为。我怎样才能做到这一点？
I'm using Bootstrap 3.1.1.
我正在使用 Bootstrap 3.1.1。
Thank you. :)
谢谢你。:)
回答by Curtis W
Add the pull-rightclass to the ul tag
将pull-right类添加到 ul 标签
Full Example:
完整示例：
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ApplicationName</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="main-navigation">
<li><a href="#">Item1</a></li>
</ul>
<ul class="nav navbar-nav pull-right" id="main-navigation">
<li><a href="#" class="pull-right">Item2</a></li>
</ul>
</div>
</div>
</nav>
Result:
结果：
回答by Sebsemillia
You have to give the element this:
你必须给这个元素：
CSS
CSS
li.right {
position: absolute;
right: 0;
}
HTML
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ApplicationName</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="main-navigation">
<li><a href="#">Item1</a></li>
<li class="right"><a href="#">Item2</a></li>
</ul>
</div>
</div>
回答by wildrails
as of the new bootstrap, we dont use pull-right
从新的引导程序开始，我们不使用 pull-right
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
从 v3.1.0 开始，我们已弃用下拉菜单上的 .pull-right。要右对齐菜单，请使用.dropdown-menu-right。导航栏中右对齐的导航组件使用此类的 mixin 版本来自动对齐菜单。要覆盖它，请使用.dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
if you use haml
如果你使用haml
%ul.nav.navbar-nav.navbar-right/
%li
%a{:href => "http://yoursitelogo.co/"}
%img{:alt => "Some site", :height => "50", :src => "/assets/image.png"}
回答by Gildon Kirk
If you add the class .justify-content-betweento the item on the left, it should push everything after that to the right.
如果您将类添加.justify-content-between到左侧的项目，它应该将之后的所有内容都推到右侧。
