如何將導航專案移動到右側?
我正在使用 Bootstrap 5 并使用導航功能。默認情況下,專案在左側對齊,但我想將它們放在右側。我已經使用過navbar-right
float: right;
,ml-auto
即使它在 Bootstrap 4 上也是如此。這是網站中導航欄的樣子
這就是我的代碼的樣子:
(注意:如果我不把它放在里面,它只會向右移動,<div id="navbarSupportedContent">
但我需要它們在那里。)
uj5u.com熱心網友回復:
我想你正在尋找這樣的東西:
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
以下是您應該牢記的一些想法:
- 該類
ml-auto
在 Bootstrap 4 和navbar-right
Bootstrap 3 中使用。在 Bootstrap 5 中,類名發生了變化,所以你應該使用ms-auto
它(參見Bootrap 5 Migration) - 類在 HTML 中不能用逗號分隔。類的逗號分隔僅適用于 CSS 選擇器。
- 我建議使用圖示字體或使用單個 svg-icon 作為用戶圖示。原因是 svg 圖示可以在沒有像素化的情況下進行縮放,它們的尺寸要小得多,并且在 SEO 和可訪問性方面通常是這個用例的更好主意。
- 請記住正確關閉所有標簽(在您的代碼中,您關閉
ul
-tag 兩次)。 - 將來,請嘗試以表格形式發布您的代碼,以便其他人可以輕松復制它。如果想幫助您,可能需要手動輸入影像。
我希望這對你有所幫助。如果沒有或如果您有任何問題,請隨時提問。保持!
uj5u.com熱心網友回復:
使用母 div 中的“flex-row-reverse”類。它會改變母 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/483608.html
下一篇:貓鼬如何計算一個月中的獨特天數?