如何将一组菜单按钮向左对齐，另一组向右对齐

Question

我使用bootstrap 5，并希望将一组菜单按钮对齐到左边，另一组对齐到右边。我的代码将第二组放在第一组的左边。

我:

button1  button2
button3  button4

我想:

button1  button2                                                   button3  button 4

代码是:

<div class="collapse navbar-collapse" id="epNavbar">
<ul class="navbar-nav w-100 me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<ul class="nav navbar-nav navbar-left">
<li><a type="button" class="btn btn-colour1 nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Administration<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a></li>
<li><a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a></li>
</ul>
</li>
<li><a type="button" class="btn btn-colour1" href="AccountUpdate.html">Account Update</a></li>
<li><a type="button" class="btn btn-colour1" href="ExerciseAdmin.html">Exercise Library</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a type="button" class="btn btn-success" href="LoginRoleSelect.html">Select Role</a></li>
<li><a type="button" class="btn btn-danger" href="Login.html">Log out</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->

Answer 1

简短的回答:如果你将me-auto类添加到第一个ul标签中，那么应该将第二组按钮推到容器的右侧(或'end')。

这个问题有一个很好的答案，用一个代码示例:引导带有左、中、右对齐项的导航栏