Bootstrap：<button> vs <a> in the nav bar. Why they look different?

Question

i'm creating my first site with Bootstrap and i'm dealing with a login/logout button in the nav bar.

Here is my HTML code:

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

Please have a look at how they appear:

What could be the problem? Why logout button became bigger?

In addition, please have a look at what happens if i view them in a small screen/window:

This time i have view problems in both cases: in the first case the login button should be aligned with the previous items; in the second case it is wrong at all.

What could be the matter?

Answer 1

可能的罪魁祸首是默认的导航栏锚样式正在添加额外的填充，这使您的注销＆＃34;按钮＆＃34;显得更大。以下是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>

-OR-

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

希望这会有所帮助。