twitter-bootstrap Bootstrap 导航栏右对齐按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24836586/
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 navbar right-align button
提问by reedvoid
Ran into a strange (maybe I just don't understand this) problem. I'm putting in a navbar at the top (navbar-inverse navbar-fixed-top), and also trying to put some links that's right-aligned, like so:
遇到了一个奇怪的（也许我只是不明白这个）问题。我在顶部 ( navbar-inverse navbar-fixed-top)放置了一个导航栏，并尝试放置一些右对齐的链接，如下所示：
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">designs</a></li>
<li><a href="#">designers</a></li>
<li><a href="#">buy</a></li>
<li><a href="#">about</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/login">login</a></li>
<li><a href="/register">sign up</a></li>
</ul>
</div>
[ http://www.bootply.com/dywf7Buv1u]
[ http://www.bootply.com/dywf7Buv1u]
This works all well, but if I say, change one of the right-aligned elements to a button wrapped inside a link, then it goes haywire.
这一切都很好，但如果我说，将右对齐元素之一更改为包裹在链接内的按钮，那么它就会失控。
Instead of:
代替：
<li><a href="/register">sign up</a></li>
I put in:
我输入：
<li><a href="/register"><button type="button" class="btn btn-primary btn-small btn-nav">Sign up</button></a></li>
[ http://www.bootply.com/DjNB53gJao#]
[ http://www.bootply.com/DjNB53gJao#]
You'll see a vertical offset where the button is lower than everything else, which also stretches the entire vertical height of the navbar.
您将看到按钮低于其他所有内容的垂直偏移，这也会拉伸导航栏的整个垂直高度。
Note that, if you ONLY put the <button>inside the <li>and do NOT wrap a <a>around it, this problem doesn't happen. There's something weird going on when you wrap <a>around a <button>
请注意，如果您只将 a 放在<button>里面<li>而不用 a 包裹<a>它，则不会发生此问题。当你环绕<a>一个<button>
Any ideas? Thanks!
有任何想法吗？谢谢！
采纳答案by Magikman
It is a little bit weird but you have to add a .btn-navclass on the list item which display the button.
这有点奇怪，但您必须.btn-nav在显示按钮的列表项上添加一个类。
Then, wrap the button in a block element and only after that add a .navbar-btnto your button.
然后，将按钮包裹在一个块元素中，然后才将 a 添加.navbar-btn到您的按钮中。
See the demo here.
请参阅此处的演示。
Hope it helps.
希望能帮助到你。
回答by Konstantinos Konstantinou
<!DOCTYPE html>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<div class="navbar-header">
<a class="navbar-brand" href="#">Recipes</a>
</div>
<div class="navbar-nav mr-auto">
<ul class="nav navbar-nav">
<a class="nav-item nav-link" href="#">Recipes</a>
<a class="nav-item nav-link" href="#">Shopping</a>
</ul>
</div>
**<div class="nav navbar-right">
<li class="nav-item dropdown">
<a class="btn btn-secondary btn-sm dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Manage
</a>
<div class="dropdown-content">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Load Data</a></li>
<li><div class="dropdown-divider"></div></li>
<li><a class="dropdown-item" href="#">Export Data</a></li>
</div>
</li>
</div>
</div>**
</nav>
