Bootstrap导航栏中如何将下拉菜单对齐到屏幕右端？

你的问题核心在于下拉菜单的定位上下文不对——当前下拉菜单嵌套在.nav navbar-nav容器里，这个容器的宽度受限于父级.navbar-offcanvas，所以dropdown-menu-right只能让菜单相对于它的直接父元素（li.dropdown）右对齐，而非整个屏幕的右端。

下面给你两种可行的解决方案：

方案一：调整结构（推荐，符合Bootstrap规范） #

把下拉菜单所在的li.dropdown从.nav navbar-nav列表中移出来，放到navbar的最外层，和.navbar-offcanvas同级，再用navbar-right类让这个下拉容器靠向屏幕右侧：

<div class="container">
  <!-- Static navbar -->
  <div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#navbar-offcanvas" data-canvas="body">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-offcanvas offcanvas" id ="navbar-offcanvas">
      <ul class="nav navbar-nav">
        <li><a href="../navmenu/">Slide in</a></li>
        <li><a href="../navmenu-push/">Push</a></li>
        <li><a href="../navmenu-reveal">Reveal</a></li>
        <li class="active"><a href="./">Off canvas navbar</a></li>
      </ul>
    </div><!--/.nav-collapse -->
    <!-- 下拉菜单移至此处，与offcanvas同级 -->
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

调整后，navbar-right会把下拉容器定位到navbar的最右侧，dropdown-menu-right就能让下拉菜单对齐屏幕右端了。

方案二：自定义CSS（不移动结构的情况下） #

如果不想修改HTML结构，可以用自定义CSS强制调整下拉菜单的定位规则：

/* 让navbar作为下拉菜单的定位基准 */
.navbar-default {
  position: relative;
}

/* 强制下拉菜单对齐屏幕右端 */
.dropdown-menu-right {
  right: 0;
  left: auto;
  /* 若需适配移动端，可添加媒体查询调整 */
}

补充说明 #

你之前添加的mr-auto类在这里无效，因为mr-auto是用于flex布局中通过margin-right: auto推挤元素，而下拉菜单是绝对定位的，这个类对它的定位没有作用。

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