Bootstrap 导航栏右对齐按钮

Question

遇到一个奇怪的（也许我只是不明白这个）问题。我在顶部 ( 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 ]

这一切都很好，但如果我说，将右对齐元素之一更改为包裹在链接内的按钮，那么它就会失控。

代替：

<li><a href="/register">sign up</a></li>

我输入：

<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# ]

您将看到按钮低于其他所有内容的垂直偏移，这也会拉伸导航栏的整个垂直高度。

请注意，如果您只将 a 放在<button>里面<li>而不用 a 包裹<a>它，则不会发生此问题。当你环绕<a>一个<button>

有任何想法吗？谢谢！

Answer 1

这有点奇怪，但您必须.btn-nav在显示按钮的列表项上添加一个类。

然后，将按钮包装在块元素中，然后才将 a 添加.navbar-btn到按钮中。

请参阅此处的演示。

希望能帮助到你。