为什么 Bootstrap 导航栏中的按钮没有正确垂直对齐

Question

以下代码生成带有下拉菜单和注销按钮的导航栏，但注销按钮没有正确垂直对齐，我该如何垂直对齐它？我已经尝试了 bootstrap 文档页面上列出的每个结构...

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- Font awesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Title</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</a>

      <div class="d-flex">
        <div class="dropdown">
          <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            <div id="ex4">
              <span class="p1 fa-stack fa-2x has-badge" data-count="4">
                <i class="p2 fa fa-bell fa-stack-1x xfa-inverse" data-count="4b"></i>
              </span>

            </div>
          </a>

          <div class="dropdown-menu dropdown-menu-end">
            <h1>Notifications</h1>
            <p>test</p>
          </div>
        </div>

        <form action="PHP/Logout.php" method="get">
          <button type="submit" class="btn btn-danger">Log Out</button>
        </form>
      </div>
    </div>
  </nav>
</body>

</html>

Answer 1

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- Font awesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Title</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</a>

      <div class="d-flex">
        <div class="dropdown">
          <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            <div id="ex4">
              <span class="p1 fa-stack fa-2x has-badge" data-count="4">
                <i class="p2 fa fa-bell fa-stack-1x xfa-inverse" data-count="4b"></i>
              </span>

            </div>
          </a>

          <div class="dropdown-menu dropdown-menu-end">
            <h1>Notifications</h1>
            <p>test</p>
          </div>
        </div>

        <form action="PHP/Logout.php" method="get">
          <button type="submit" style="margin-left:10px; margin-top:20px;" class="btn btn-danger">Log Out</button>
        </form>
      </div>
    </div>
  </nav>
</body>

</html>

Answer 2

制作表单 display: flex 并修改按钮的样式

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- Font awesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Title</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</a>

      <div class="d-flex">
        <div class="dropdown">
          <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            <div id="ex4">
              <span class="p1 fa-stack fa-2x has-badge" data-count="4">
                <i class="p2 fa fa-bell fa-stack-1x xfa-inverse" data-count="4b"></i>
              </span>

            </div>
          </a>

          <div class="dropdown-menu dropdown-menu-end">
            <h1>Notifications</h1>
            <p>test</p>
          </div>
        </div>

        <form style="display: flex;" action="PHP/Logout.php" method="get">
          <button style="margin-left: 5px;" class="btn btn-danger">Log Out</button>
        </form>
      </div>
    </div>
  </nav>
</body>

</html>

Answer 3

问得好表单将需要一个 flex 显示来解决这个问题，在 bootstrap 中是 d-flex，然后可以使用 bootstrap 边距 class mx-numberHere 在两个按钮之间留一个空隙。

更新的代码段

<form class="d-flex" action="PHP/Logout.php" method="get">
   <button type="submit" class="mx-2 btn btn-danger">Log Out</button>
</form>

BOOTSTRAP 类

Display Properties

Spacing

您还可以手动编辑 bootstrap classes，方法是将 bootstrap class 设为 .

示例：

.bootstrapClassName {
    /*CSS*/
}

Answer 4

只需添加 align-items-center...

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <div class="d-flex align-items-center">
            <div class="dropdown">
                <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                    <div id="ex4">
                        <span class="p1 fa-stack fa-2x has-badge" data-count="4">
                            <i class="p2 fa fa-bell fa-stack-1x xfa-inverse" data-count="4b"></i>
                        </span>
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                    <h1>Notifications</h1>
                    <p>test</p>
                </div>
            </div>
            <form action="PHP/Logout.php" method="get">
                <button type="submit" class="btn btn-danger">Log Out</button>
            </form>
        </div>
    </div>
</nav>

https://codeply.com/p/jTuPADiGhZ

为什么 Bootstrap 导航栏中的按钮没有正确垂直对齐

Why is a button in Bootstrap navbar not vertically aligned correctly

html

twitter-bootstrap

bootstrap-5

更新的代码段