Bootstrap 5 在導航欄中垂直居中對齊元素
[英]Bootstrap 5 vertically center aligning elements in navbar
問題描述
我目前正在使用 bootstrap 創建一個充滿鏈接的導航欄。 我擁有的其中一個鏈接是一個按鈕，該按鈕導致其他鏈接無法正確垂直對齊。
body{ background: rgb(27, 25, 25); }.btn{ border-radius: 3em; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Adam Farrow </title> <.-- CSS only --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <link rel="stylesheet" href="data/styles:css" type="text/css"> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container-xxl"> <a href="#" class="navbar-brand"> <span class="fw-bold text-secondary"> Adam Farrow </span> </a> <button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end align-center" id="main-nav"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link " href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li> <li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> <li class="nav-item ms-2 d-none d-md-inline"> <a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a> </li> </ul> </div> </div> </nav> <.-- JavaScript Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </body> </html>
如您所見，如果您運行代碼，項目將略微未對齊。
我嘗試在圍繞該問題的 ul 標簽上使用“text-center”。 以及我嘗試創建一個類並對列表中的項目使用“top = 50%”。
1 個解決方案
解決方案1
1 已采納 2022-12-20 23:09:37
使用 padding-bottom 或 padding-top: 2px 來定位你的 github 鏈接
在 Bootstrap 導航欄中對齊元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.