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

您会看到按钮低于其他所有按钮的垂直偏移量，这也拉伸(stretch)了导航栏的整个垂直高度。

请注意，如果您只输入 <button>里面 <li>并且不要包装 <a>围绕它，这个问题不会发生。包裹 <a> 时发生了一些奇怪的事情围绕 <button>
有任何想法吗？谢谢!

Answer 1

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

然后，将按钮包装在 block 元素中，然后添加 .navbar-btn到您的按钮。

见 the demo here .

希望能帮助到你。