如何用Bootstrap CSS类将导航栏单个下拉项移至右侧？

嘿，这个需求完全可以用Bootstrap自带的布局类实现，不用额外写自定义CSS，分Bootstrap版本给你具体方案：

Bootstrap 4 实现方式 #

Bootstrap 4的导航栏基于Flexbox布局，你只需要给要右移的下拉菜单所在的<li>标签加上ml-auto类（margin-left: auto的缩写），这个类会自动把该元素推到导航栏的最右侧，其他菜单项自然保持在左侧。

修改后的代码如下：

<div class="collapse navbar-collapse" id="navbarNavDropdown">
  <ul class="navbar-nav">
    <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="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <!-- 新增ml-auto类，将这个下拉菜单推到右侧 -->
    <li class="nav-item dropdown ml-auto">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        My account
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</div>

Bootstrap 5 实现方式 #

Bootstrap 5对间距类做了更规范的命名，把ml-auto换成了ms-auto（margin-start: auto的缩写，更符合CSS逻辑），同时下拉菜单的触发属性从data-toggle改成了data-bs-toggle，调整后的代码如下：

<div class="collapse navbar-collapse" id="navbarNavDropdown">
  <ul class="navbar-nav">
    <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="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <!-- Bootstrap 5使用ms-auto类 -->
    <li class="nav-item dropdown ms-auto">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        My account
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</div>

小提示 #

你原来用的navbar-right类在Bootstrap 4及之后的版本已经被弃用了，所以不要再用这个类啦。如果之后需要把多个菜单项一起右移，也可以把它们单独放在一个<ul class="navbar-nav ml-auto">（Bootstrap4）或<ul class="navbar-nav ms-auto">（Bootstrap5）里，这样整个组都会被推到右侧。

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