- 首页
- 前端开发
- 如何在 Bootstrap 5 中将导航项目向右对齐?
如何在 Bootstrap 5 中将导航项目向右对齐?
[英] How to align nav items to the right in Bootstrap 5?
本文介绍了如何在 Bootstrap 5 中将导航项目向右对齐?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从 https://www.codeply.com/go/qhaBrcWp3v 复制了导航栏 HTML 代码
示例 6:
<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">我们的解决方案</a><li class="nav-item"><a href="#";class="nav-link m-2 menu-item">我们如何提供帮助</a><li class="nav-item"><a href="#";class="nav-link m-2 menu-item">Bdfdsfslog</a><li class="nav-item"><a href="#";class="nav-link m-2 menu-item">联系人</a>
代码将导航项目保持在右侧，但是当我粘贴它并运行我的 HTML 代码时，它不起作用，所有项目都在左侧
这是我的 index.html
<头><title>网站模板</title><link rel="样式表";href="style.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css";rel=样式表"完整性=sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"crossorigin=匿名"><script src=https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"完整性=sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"crossorigin=匿名"></script><body data-spy="scroll";数据目标=#navbarResponsive"><div id="home"></div><!-- 导航--><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"><!-- 隐藏的间隔以在移动设备上集中品牌-></span><a class="navbar-brand d-none d-lg-inline-block";href=#">导航栏 6</a><a class="navbar-brand-two mx-auto d-lg-none d-inline-block";href=#"><img src="//placehold.it/40?text=LOGO";alt=标志"></a><div class="w-100 text-right"><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=#myNavbar"><span class="navbar-toggler-icon"></span>
<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">我们的解决方案</a><li class="nav-item"><a href="#";class="nav-link m-2 menu-item">我们如何提供帮助</a><li class="nav-item"><a href="#";class="nav-link m-2 menu-item">Blog</a><li class="nav-item"><a href="#";class="nav-link m-2 menu-item">联系人</a>
</nav><!-- 导航结束-->
我已经尝试了 https://getbootstrap 中的 Navbar 代码.com/docs/5.0/components/navbar/ 但我不知道如何移动导航项目(ml-auto 不起作用)
解决方案
来自我的示例 Codeply 的代码正在使用 Bootstrap 4，但您的代码使用 Bootstrap 5 测试版.如果您查看新的 Bootstrap 5 间距实用程序类，您会看到...
l(左)已被替换为 s (start)r(右)已被替换为 e(end)
为什么左边距 (ml-*) 在 Bootstrap 5 中不起作用?
ml-auto 不再存在，Bootstrap 5 等效项将是 ms-auto:
演示:https://codeply.com/p/zzFC5XoyUm
为什么右边距 (mr-*) 在 Bootstrap 5 中不起作用?
此外，mr-auto 已替换为 me-auto.
在这里您可以了解 Bootstrap 5 为何使用 start 和 end 方法提高 RTL 支持，因为 left 和 right 是绝对的，而 start和 end 是相对的.
justify-content-end 等 flexbox 实用程序也可以用作 在此处解释
I have copied a navbar HTML code from https://www.codeply.com/go/qhaBrcWp3v
Example 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>
The code keeps the nav items to right but when I paste it and run my HTML code it doesn't work and all items are in the left place
here is my 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>
I have tried Navbar code from https://getbootstrap.com/docs/5.0/components/navbar/ but I don't know how can I move nav items (ml-auto didn't work)
解决方案
The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you'll see that...
l (left) has been replaced with s (start)r (right) has been replaced with e (end)
Why margin left (ml-*) is not working in Bootstrap 5?
ml-auto no longer exists, and the Bootstrap 5 equivalent would be 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" 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 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>
Demo: https://codeply.com/p/zzFC5XoyUm
Why margin right (mr-*) is not working in Bootstrap 5?
Additionally, mr-auto has been replaced with me-auto.
Here you can read why Bootstrap 5 uses the start and end approach to improve RTL support since left and right are absolute, while start and end are relative.
The flexbox utils such as justify-content-end can also be used as explained here
这篇关于如何在 Bootstrap 5 中将导航项目向右对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
