极客观点
项目管理
HarmonyOS
我从 https://www.codeply.com/go/qhaBrcWp3v 复制了一个导航栏 HTML 代码
示例 6：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#">
Navbar 6
</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Bdfdsfslog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
该代码将导航项保持在右侧，但是当我将其粘贴并运行我的 HTML 代码时，它不起作用并且所有项都在左侧
这是我的 index.html
<html>
<head>
<title>Website Template</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home"></div>
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#">
Navbar 6
</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- END OF NAVIGATION -->
</body>
我试过 Navbar 来自 https://getbootstrap.com/docs/5.0/components/navbar/ 的代码，但我不知道如何移动导航项目（ ml-auto 没有’工作）
原文由 CaRL 发布，翻译遵循 CC BY-SA 4.0 许可协议
我的 示例 Codeply 中的代码使用的是 Bootstrap 4，但您的代码使用的是 Bootstrap 5 beta。如果您看一下新的 Bootstrap 5 间距实用程序类，您会发现…
l（左）已替换为s（ 开始）r（右）已替换为e（ 结束）为什么剩余边距（ml-*）在 Bootstrap 5 中不起作用？
ml-auto不再存在，Bootstrap 5 等效项将是ms-auto：演示： https ://codeply.com/p/zzFC5XoyUm
为什么margin right (mr-*) 在 Bootstrap 5 中不起作用？
此外，
mr-auto已被替换为me-auto。Here you can read why Bootstrap 5 uses the
startandendapproach to improve RTL support sinceleftandrightare absolute, whilestart和end是相对的。诸如
justify-content-end之类的 flexbox 实用程序也可以按照 此处的说明 使用