如何在 Bootstrap 5 中将导航项目向右对齐？
Posted
技术标签:
【中文标题】如何在 Bootstrap 5 中将导航项目向右对齐？【英文标题】：How to align nav items to the right in Bootstrap 5? 【发布时间】：2021-03-22 23:57:57 【问题描述】：我从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" >
</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" >
</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>
我尝试了https://getbootstrap.com/docs/5.0/components/navbar/ 中的Navbar 代码，但我不知道如何移动导航项（ml-auto 不起作用）
【问题讨论】：
【参考方案1】：我实际上尝试了一种不同的方法，尽管受到我之前的一些帖子的启发。我只想将导航栏上的一些按钮（“我的个人资料”和“登录”按钮）向右对齐，同时将所有其他按钮留在导航栏上。
遵循这个过程
-
使用
position-relative将导航栏的位置设置为相对位置
将要右对齐的按钮放在单独的<ul> 中
将<ul> 设置为绝对位置，并在末尾像这样：<ul class="navbar-nav position-absolute end-0 mx-3">
在您刚刚创建的<ul> 之前创建一个空的<li>，以在缩小屏幕时保持间距（因为绝对元素会与其他静态和相对元素重叠）。
设置宽度等于右对齐<ul>（使用 Chrome 检查元素找出这一点）。例如。 <li class="nav-item" style="width: 150px"></li>
以我的代码为例
# Create Navbar #
<nav class="navbar navbar-expand-md navbar-dark bg-dark position-relative mb-4">
<div class="container-fluid">
<a class="navbar-brand" href=" path('home') ">
<img src="/favicon/android-chrome-192x192.png" style="height: 50px; width: 50px">
Company Name
</a>
<button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href=" path('home') ">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href=" path('guide_home') ">Guide</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About us</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a>
</li>
# Invisible div to prevent overlap of absolute positioned elements #
<li class="nav-item" style="width: 150px"></li>
<ul class="navbar-nav position-absolute end-0 mx-3">
# Create a login or logout link depending whether a user is logged in or not #
% if app.user %
<li class="nav-item">
<a class="nav-link" href=" path('profile_home') ">My Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href=" path('app_logout') ">Logout</a>
</li>
% else %
<li class="nav-item">
<a class="nav-link" href=" path('app_login') ">Login/Register</a>
</li>
% endif %
</ul>
</ul>
</div>
</div>
</nav>
总体
与我见过的其他解决方案相比，我发现这更容易理解，并且能够更轻松地工作。我希望这对其他看到这篇文章的人有用。如果您对我的方法有任何反馈以及您有任何改进，请发表评论。谢谢！ :)
注意：我的示例是在 Symfony 项目中使用 twig 模板完成的，以防您发现任何语法混淆。但是，任何开发工具的所有 HTML 都是相同的。
【讨论】：
【参考方案2】：我example Codeply 的代码使用的是 Bootstrap 4，但您的代码使用的是 Bootstrap 5 beta。如果您查看新的Bootstrap 5 spacing utility classes，您会发现...
l（左）已替换为s（开始）
r（右）已替换为e（结束）
为什么左边距 (ml-*) 在 Bootstrap 5 中不起作用？
ml-auto 不再存在，Bootstrap 5 等效项将是 ms-auto:
<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" >
</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 ms-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>
演示：https://codeply.com/p/zzFC5XoyUm
为什么右边距 (mr-*) 在 Bootstrap 5 中不起作用？
此外，mr-auto 已替换为 me-auto。
您可以在此处通过read why Bootstrap 5 uses the start and end approach 改进 RTL 支持，因为left 和right 是绝对的，而start 和end 是相对的。
justify-content-end 等 flexbox 工具也可以用作explained here
【讨论】：
【参考方案3】：对于那些开始使用 bootstrap 5（测试版）的人来说，类名几乎没有变化。
在引导程序中，“左”被“开始”替换，“右”被“结束”替换。
例如，在 bootstrap 4 中，我们有 ml-auto，但在 bootstrap 5 中，我们必须使用 ms-auto，同样对于 mr，我们有 me。
同样适用于引导程序中的每个类，无论“左”和“右”是否由“l”和“r”表示，它们都被“s”和“e”替换，如果它们在任何地方都被完整地使用单词（左右）被“start”和“end”替换
【讨论】：
【参考方案4】：不要使用 justify-content-end 使用 ms-auto
用于m- margin 和p-padding
t - 用于设置 margin-top 或 padding-top 的类
b - 用于设置 margin-bottom 或 padding-bottom 的类
s - 对于在 LTR 中设置 margin-left 或 padding-left 的类，
RTL 中的 margin-right 或 padding-right
e - 对于在 LTR 中设置 margin-right 或 padding-right 的类，
RTL 中的 margin-left 或 padding-left
x - 对于同时设置 *-left 和 *-right 的类
y - 对于同时设置 *-top 和 *-bottom 的类
【讨论】：
【参考方案5】：试试这个：
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
你有这个：
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1"> //modify this to include flex-row-reverse
【讨论】：
以上是关于如何在 Bootstrap 5 中将导航项目向右对齐？的主要内容，如果未能解决你的问题，请参考以下文章