css - Bootstrap 5 导航栏位置元素
问题描述
所以我一直在使用 Bootstrap-5 和创建导航栏的“新”方法,我都得到了我想要的。但由于某种原因,我似乎无法让最后一个元素与右侧对齐,有人有什么建议吗?
这是现在的样子:https ://jsfiddle.net/FoTL_Development/428wyt6q/72/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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>
<span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
<!-- Left Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
</ul>
</div>
<!-- End Left Element -->
<!-- Center Element -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
<li>Center</li>
</ul>
</div>
<!-- End Center Element -->
<!-- Right Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li>Right</li>
</ul>
</div>
<!-- End Right Element -->
</div>
</nav>
解决方案
您将使用ms-auto
将最后一个元素向右推...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<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>
<span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
<!-- Left Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left</a>
</li>
</ul>
</div>
<!-- End Left Element -->
<!-- Center Element -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
<li>Center</li>
</ul>
</div>
<!-- End Center Element -->
<!-- Right Element -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li>Right</li>
</ul>
</div>
<!-- End Right Element -->
</div>
</nav>
https://codeply.com/p/y2YCYHmcYQ
此外,您似乎me-auto
在中心导航上没有必要。
推荐阅读
- security - 如何开发采用 ADFS 安全性的应用程序?对DEV阶段感兴趣
- vba - 检索 ZIP 文件中的文件列表
- java - 如何使用 Java 和 PGP 公钥验证文件签名?
- tensorflow - 是否可以使用 fit_generator 洗牌验证数据
- c++ - 链接 CPP 文件进行测试时出现 LNK2019 错误
- android - 从源代码构建自己的 LineageOS 生成错误
- php - 购物车仍然显示已删除的产品 Laravel
- javascript - 在 Nativescript 中实现原生 android .aar 文件或 .aidl 会抛出原生 calss 对象而无法访问方法
- google-cloud-platform - google cloud sql v1beta4 是否仍处于测试阶段?
- c# - 在 c# 中隐藏代理生成的某些属性