我怎樣才能把這個導航欄選單移到右邊？
我無法將這個導航欄選單移到右側。 我已經嘗試了浮動的方法。什么是最好的解決方案？
我試了很多方法，但還沒有結果，你能幫我解決這個問題嗎？
以下是我的代碼
<html>
<head>
<meta charset="utf-8">/span>
< 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="styleheet"
integrity="sha384-"。 F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"/span>>
< link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>/span>TechSite</title>/span>
<style>
.navbar-brand{
字體大小。2rem;
}
ul.navbar-nav {
font-size: 1.15rem;
}
.nav-link {
padding: .3rem 1rem;
color: white;
}
.nav-link:hover {
color: white;
}
button.navbar-toggler {
color: white;
}
p {
color: gray;
}
</style>>
</head>
<body>
<! -- navbar -->
<nav class="navbar navbar-expand-lg bg-dark fixed-top">
<div class="container-fluid">/span>
< a class="navbar-brand" href="#"/span> style="color: red;">
技術網站
</a>/span>
< button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav"/span> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: white;"></span>>
</button>/span>
< div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav float-end"/span>>
<li class="nav-item">
< a class="nav-link active rounded" aria-current="page" href="#"
style="color: rgb(173, 173, 173); border: 1px solid wheat;">
首頁
</a>/span>
</li>/span>
<li class="nav-item dropdown">/span>
< a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-bs-toggle="dropdown" aria-expanded="false">
服務
</a>服務
< ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>< a class="dropdown-item" href=> App開發</a></li>
<li>< a class="dropdown-item" href="#"/span>> 游戲開發</a></li>
<li>< a class="dropdown-item" href=> 網路開發</a></li>/span>
</ul>/span>
</li>/span>
<li class="nav-item">
< a class="nav-link" href="#"/span> style="color: white;">關于</a>/span>
</li>/span>
<li class="nav-item">
< a class="nav-link" href="#"/span> style="color: white;">聯系</a>/span>
</li>/span>
</ul>/span>
</div>/span>
</div>/span>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span>
crossorigin="anonymous"></script>/span>
</body>
</html>
使用Bootstrap 5來解決這個問題是否是更好的主意？
uj5u.com熱心網友回復：
在flex system中，你給容器navbar-collapse的類justify-content-center，你的選項選單將被排列在右邊。
更新你的HTML代碼，如下
< nav class="navbar navbar-expand-lg bg-dark fixed-top">
<div class="container-fluid">/span>
< a class="navbar-brand" href="#"/span> style="color: red;">
技術網站
</a>/span>
< button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav"/span> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: white;"></span>>
</button>/span>
< div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav float-end"/span>>
<li class="nav-item">
< a class="nav-link active rounded" aria-current="page" href="#"
style="color: rgb(173, 173, 173); border: 1px solid wheat;">
首頁
</a>/span>
</li>/span>
<li class="nav-item dropdown">/span>
< a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-bs-toggle="dropdown" aria-expanded="false">
服務
</a>服務
< ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>< a class="dropdown-item" href=> App開發</a></li>
<li>< a class="dropdown-item" href="#"/span>> 游戲開發</a></li>
<li>< a class="dropdown-item" href=> 網路開發</a></li>/span>
</ul>/span>
</li>/span>
<li class="nav-item">
< a class="nav-link" href="#"/span> style="color: white;">關于</a>/span>
</li>/span>
<li class="nav-item">
< a class="nav-link" href="#"/span> style="color: white;">聯系</a>/span>
</li>/span>
</ul>/span>
</div>/span>
</div>/span>
</nav>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/321910.html
標籤：