Twitter bootstrap 引导：<；按钮>；vs<；a>；在导航栏中。为什么它们看起来不一样？

我正在用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>

登录

请看一下它们是如何出现的：

有什么问题吗？为什么注销按钮变大了

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

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

---

可能是什么问题？

罪魁祸首可能是默认的导航栏锚样式添加了额外的填充，这会使您的注销“按钮”看起来更大。以下是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） 将锚点切换到按钮，类似于

注销

-或

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

---

希望这有帮助

我不明白这一点。无论如何，我认为最好是覆盖样式。你能告诉我怎么做吗？@smartmouse我试图对我的答案进行澄清。如果您还有任何问题，请告诉我。我使用了第一种解决方案。无论如何，这并不能解决小屏幕的问题。

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