Bootstrap 5：NAV 項未右對齊
[英]Bootstrap 5: NAV items do not align to the right
問題描述
如何將導航項移動到右側？
我正在使用 Bootstrap 5 並使用導航功能。 默認情況下，項目在左側對齊，但我想將它們放在右側。 我已經使用了navbar-right float: right; 和ml-auto ，即使它在 Bootstrap 4 上也是如此。這是網站上導航欄的樣子
這就是我的代碼的樣子：
（注意：如果我不把它放在<div class="collapse navbar-collapse" id="navbarSupportedContent">中，它只會向右移動，但我需要它們在那里。）
2 個解決方案
解決方案1
1 已采納 2022-05-28 15:01:38
我想你正在尋找這樣的東西：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min:css" rel="stylesheet" /> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons:css" /> <title>Investigation Management and Alert Site</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#"> Investigation Management and Alert Site </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Inspections</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-person-fill"></i> </a> </li> </ul> </div> </div> </nav> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
以下是您應該牢記的一些想法：
- Bootstrap 4 中使用了
ml-autoclass，Bootstrap 3 中使用了navbar-right。使用 Bootstrap 5 時，類名發生了變化，因此您應該為此使用ms-auto（請參閱Bootrap 5 遷移） - HTML 中的類不得以逗號分隔。類的逗號分隔僅適用於 CSS 選擇器。
- 我建議使用圖標字體或使用單個 svg-icon 作為用戶圖標。 這樣做的原因是 svg-icons 可以在沒有像素化的情況下進行縮放，它們的尺寸要小得多，並且在 SEO 和可訪問性方面通常是這個用例的更好主意。
- 請記住正確關閉所有標簽（在您的代碼中，您關閉了
ul-tag 兩次）。 - 以后盡量把你的代碼以表格的形式貼出來，方便別人復制。 對於圖像，如果有人想幫助您，可能需要手動輸入所有內容。
希望對您有所幫助。 如果沒有或者您有任何問題，請隨時提問。 繼續努力吧！
解決方案2
0 2022-05-28 14:49:03
在母 div 中使用“flex-row-reverse”class。 它會改變 position 的子項目的母親 div。 截圖 - https://prnt.sc/uZi6oR9evyaJ
使用桌面和移動設備的導航標記
<nav class="navbar d-lg-flex navbar-expand-lg navbar-light bg-light align-items-center justify-content-between">
<div class="d-flex w-100 align-items-center justify-content-between">
<a class="navbar-brand" href="#">
Site Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse w-100 navbar-collapse flex-row-reverse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
HTML＆Bootstrap nav-right不能將元素右對齊？
[英]HTML & Bootstrap nav-right doesn't align elements to the right?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.