Bootstrap：导航栏中的 <button> 与 <a>。为什么它们看起来不一样？

Question

我正在使用 Bootstrap 创建我的第一个站点，并且我正在处理导航栏中的登录/注销按钮。

这是我的 HTML 代码：

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <?php
          if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === TRUE) {
        ?>
            <li><a href="logout.php" class="btn btn-primary navbar-btn" type="button" role="logout">Logout</a></li>    
        <?php
          } else {
        ?>
              <li><button class="btn btn-success navbar-btn" type="button" data-toggle="modal" data-target="#signInModal">Login</button></li>
        <?php
          }
        ?>
      </ul>

请看一下它们的外观：

可能是什么问题？为什么注销按钮变大了？

另外，请看看如果我在小屏幕/窗口中查看它们会发生什么：

这一次我在两种情况下都遇到了问题：在第一种情况下，登录按钮应该与前面的项目对齐；第二种情况是完全错误的。

怎么回事？

Answer 1

可能的罪魁祸首是默认导航栏锚样式添加了额外的填充，这使您的注销“按钮”显得更大。以下是 bootstrap.css 文件中可能导致问题的样式：

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

.navbar-btn {
  margin-top: 8px;
  margin-bottom: 8px;
}

它还解释了为什么它在响应模式下扩展，因为从技术上讲，导航中的其他项目正在这样做（您只是看不到它，因为它们是相同的颜色）。

我的建议是：

1) 将锚点切换为按钮，例如 this stackoverflow article suggests。

<form action="logout.php">
<button class="btn btn-primary navbar-btn" type="submit" role="logout">Logout</button>
</form>

-或-

2) 通过在 bootstrap.css 文件之后创建要包含在标题中的自定义样式表来覆盖样式。在该样式表中，您可以调整上述元素的样式，直到获得所需的外观。

希望这会有所帮助。