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

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

请注意，如果您只将<button>放在<li>内并且不包围<a>，则此问题不会发生。当<a>围绕<button>

包裹时，会发生一些奇怪的事情

有什么想法吗？谢谢！

Answer 1

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

然后，将按钮包裹在一个块元素中，然后在按钮中添加.navbar-btn。

请参阅the demo here。

希望它有所帮助。

Answer 2

<!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>

Bootstrap导航栏右对齐按钮

2 个答案: