📅  最后修改于: 2023-12-03 15:08:51.643000             🧑  作者: Mango
在Bootstrap中,常见的导航栏是居中对齐的,但是有时候我们需要将某些导航栏项目向右对齐。那么该怎么做呢?
Bootstrap 4使用了flex布局,flex的类包括.justify-content-start
、.justify-content-center
、.justify-content-end
、.justify-content-around
和.justify-content-between
。我们可以使用.justify-content-between
类来实现将导航栏项目向右对齐的效果。
首先,在导航栏的<ul>
标签中添加.ml-auto
类,这将把左侧的所有项目都向左对齐。然后,在最右侧的导航栏项目所在的<li>
标签中添加.mr-0
类,这将使该项目到边缘的距离为0。最后,在该<ul>
标签上添加.justify-content-between
类即可。
下面是实现代码:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto justify-content-between">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item mr-0">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
注意,.ml-auto
和.mr-0
必须加在相应的<li>
标签上。
通过使用Bootstrap的flex类,我们可以轻松实现将导航栏项目向右对齐的效果。同时,由于Bootstrap的flex布局非常灵活,我们还可以根据实际需求自由调整。