Html Bootstrap - 右侧浮动导航栏按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21544636/
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 - floating navbar button right
提问by Michael Blake
I'm using the bootstrap navigation bar, but I want to float one of the buttons to the right instead of the left as it already is. Here's the HTML:
我正在使用引导程序导航栏，但我想将其中一个按钮浮动到右侧而不是左侧，因为它已经是这样。这是 HTML：
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact" class="navbar-nav pull-right">Contact</a></li>
</ul>
</div>
</div>
</div>
I've tried using nav navbar-nav navbar-right, float:right, and pull-right. I really don't know what else I could do. Any help is appreciated.
我已经尝试使用nav navbar-nav navbar-right，float:right和pull-right。我真的不知道我还能做什么。任何帮助表示赞赏。
采纳答案by helion3
回答by Ravimallya
You would need to use the following markup. If you want to float any menu items to the right, create a separate <ul class="nav navbar-nav">with navbar-rightclass to it.
您需要使用以下标记。如果要将任何菜单项向右浮动，请为其创建一个单独<ul class="nav navbar-nav">的navbar-right类。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>回答by Henry
In bootstrap 4 use:
在引导程序 4 中使用：
<ul class="nav navbar-nav ml-auto">
This will push the navbar to the right. Use mr-auto to push it to the left, this is the default behaviour.
这会将导航栏推到右侧。使用 mr-auto 将其推向左侧，这是默认行为。
