html - 为什么 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>
解决方案
只需添加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>
推荐阅读
- python - 在 Keras 中实现条件 WGAN-GP
- python - Python 请求 POST(和 Cookie)登录并在 GET 抓取失败后
- python - 为什么我的函数只返回列表中的一项?
- python - Django 查询:按对话分组的最后收到的邮件
- vba - 从网络驱动器文件夹打开 .msg 然后下载超链接
- android - 如何将 TypedArray 传递到包中
- jquery - 将下拉列表中的 2 个参数传递给控制器。
- php - 查询生成器将查询生成器的结果转换为模型对象
- parsing - FParsec - 收集元组列表
- vba - 使用多个电子邮件帐户发送 MailEnvelope