如何将Bootstrap移动端导航栏下拉菜单项改为右对齐？

针对你遇到的移动端导航栏下拉菜单项左对齐的问题，有几种简单的解决方式，根据你使用的Bootstrap版本选择即可：

方法一：利用Bootstrap内置类（适用于Bootstrap 4/5） #

Bootstrap本身提供了对齐相关的工具类，直接给下拉菜单容器添加对应类就能让菜单项右对齐：

• Bootstrap 5：添加dropdown-menu-end类
• Bootstrap 4：添加dropdown-menu-right类

示例代码：

<!-- Bootstrap 5 示例 -->
<div class="dropdown-menu dropdown-menu-end">
  <a class="dropdown-item" href="#">菜单项1</a>
  <a class="dropdown-item" href="#">菜单项2</a>
</div>

<!-- Bootstrap 4 示例 -->
<div class="dropdown-menu dropdown-menu-right">
  <a class="dropdown-item" href="#">菜单项1</a>
  <a class="dropdown-item" href="#">菜单项2</a>
</div>

方法二：自定义CSS样式（通用所有版本） #

如果内置类不生效，或者需要更灵活的控制，可以添加自定义CSS强制设置对齐：

仅调整菜单项文本对齐 #

/* 针对移动端断点（Bootstrap默认991px以下为移动端） */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-item {
    text-align: right;
  }
}

调整整个下拉菜单的位置（从右侧弹出） #

@media (max-width: 991px) {
  .dropdown-menu {
    right: 0;
    left: auto;
  }
}

注意事项 #

• 自定义CSS要放在Bootstrap官方样式文件之后，才能覆盖默认样式。
• 若使用Bootstrap 3，对应内置类为pull-right，添加到dropdown-menu容器即可。

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