angular - 如何编辑引导导航栏?
问题描述
我正在尝试制作一个有角度的应用程序,我正在使用bootstrap@5.0.2
. 在导航栏中,我有两个链接,我想将其移动到右侧。但我无法做到。我该怎么办?
这就是问题
HTML 代码:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">HOMEPAGE</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<span class="navbar-text">
<a routerLink="/homepage/registration">Registration</a>
</span>
<span class="navbar-text">
<a routerLink="/homepage/login">Login</a>
</span>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
解决方案
ul
在这样的标签之前使用弹性间隔
<span class="flex-spacer"></span>
在css中添加类
.flex-spacer {
flex: 1 1 auto;
}
您的代码将是
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">HOMEPAGE</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<span class="flex-spacer"></span>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<span class="navbar-text">
<a routerLink="/homepage/registration">Registration</a>
</span>
<span class="navbar-text">
<a routerLink="/homepage/login">Login</a>
</span>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
这是它的样子
希望这有帮助。
推荐阅读
- javascript - 使用 NodeJS 向 JSON 文件键添加新属性
- python - Tensorflow中的随机法线矩阵
- javascript - 带有 php 查询的 Javascript
- php - 如何使这段代码简短易读?
- python - 如何快速对数组中给定范围内的元素求和?
- c# - 如何为 ASP.NET Core 应用配置 Azure 应用服务日志记录提供程序?
- php - 导出到 csv 时在 mysql 数据库中转义 php '#' 注释符号
- php - 如何使用简码列出媒体库文件夹中的文件?
- c# - 如何隐藏 Visio 到 RichTexbox 的复制过程
- swift - 添加 viewForAnnotations 后 MapView 不显示注释