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.