我使用boostrap 5，我嘗試在導航欄上左側有一個徽標，右側有2個鏈接文本。
我創建了一個示例 https://www.codeply.com/p/qeJmKiiNK0
實際上，右側的文本沒有顯示。
uj5u.com熱心網友回復：
導航欄需要包裝.navbar用.navbar-expand{-sm|-md|-lg|-xl}的回應倒塌和顏色方案的類。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Notify Telegram | Mr. Developer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<!-- Added "navbar-expand-*" styles to the item below. -->
<nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://w7.pngwing.com/pngs/397/510/png-transparent-graphic-design-logo-online-and-offline-business-design-company-text-logo.png" style="width:50px" />
</a>
</div>
<!-- Moved the following container outside of the previous <div> element to align the <a> elements to the right. -->
<div class="collapse navbar-collapse order-3 d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Right</a></li>
</ul>
</div>
</nav>
</body>
</html>參考
- Bootstrap 5.1 - 導航欄
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407511.html
標籤：