如何将Bootstrap导航栏菜单移至屏幕最右侧？

问题描述 #

我正在使用Bootstrap，目前仍在学习CSS和Bootstrap。我希望将ul中的链接移至屏幕最右侧，尝试了justify-content:right、text-end类以及justify-content: space-between均无效，请求帮助。当前导航栏代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" routerLink="/home">
    <img src="../assets/images/My project (1).png" width="40" height="20" class="d-inline-block align-top" alt="">
  </a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="mr-auto"></div>
    <ul class="navbar-nav my-2 my-lg-0">
      <li class="nav-item active"><a class="nav-link" routerLink="/home">Home<span class="sr-only">(current)</span></a></li> 
      <li class="nav-item"><a class="nav-link" routerLink="/property">Property<span class="sr-only">(current)</span></a></li>                   
      <li class="nav-item"><a class="nav-link" routerLink="/about">About<span class="sr-only">(current)</span></a></li>
    </ul>
  </div>
</nav>

解决方法 #

Bootstrap导航栏基于弹性盒布局，你可以用以下两种方法快速实现链接居右：

方法1：给导航列表添加ms-auto类（Bootstrap 5适用） #

直接修改<ul>的class，加上ms-auto（margin-start:auto），这个类会让导航列表自动填充左侧空间，从而被推到最右侧：

<ul class="navbar-nav ms-auto my-2 my-lg-0">
  <!-- 列表项内容不变 -->
</ul>

方法2：针对Bootstrap 4版本，用ml-auto替代ms-auto #

如果你用的是Bootstrap 4，把ms-auto换成ml-auto（margin-left:auto）即可，原理和上面一致：

<ul class="navbar-nav ml-auto my-2 my-lg-0">
  <!-- 列表项内容不变 -->
</ul>

额外说明 #

• 你代码里的<div class="mr-auto"></div>是旧版写法，现在可以直接移除，用上述类就能实现效果，代码更简洁。
• text-end类是用来让文本右对齐的，但导航栏是弹性布局，对容器内的flex子项不生效；justify-content:right需要加在.navbar-collapse上，但不如ms-auto精准控制导航项的位置，推荐用前者。

内容的提问来源于stack exchange，提问作者user20843725