如何将Bootstrap下拉菜单移至左侧？

嘿，我看你是想把Bootstrap导航栏里的下拉菜单调整到左侧显示对吧？结合你给的nav-pills代码，我给你两种常见场景的解决方案，亲测有效：

场景1：让下拉菜单往父元素左侧弹出（默认是往右/下方展开） #

如果你的下拉按钮在导航栏偏右的位置，不想让下拉菜单超出屏幕右边，只需要给下拉菜单容器加个Bootstrap原生的dropdown-menu-left类就行，完全不用写额外CSS：

<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
    <ul class="nav nav-pills">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                下拉菜单
            </a>
            <!-- 关键：添加dropdown-menu-left类让菜单往左弹出 -->
            <div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="#">选项1</a>
                <a class="dropdown-item" href="#">选项2</a>
                <a class="dropdown-item" href="#">选项3</a>
            </div>
        </li>
        <!-- 其他导航项示例 -->
        <li class="nav-item">
            <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
        </li>
    </ul>

    <!-- 必须引入的Bootstrap JS依赖，不然下拉交互会失效 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>

场景2：让下拉菜单内部内容左对齐（如果被自定义样式搞乱了） #

要是你发现下拉菜单里的选项不是左对齐（比如之前加了全局样式导致偏移），可以用自定义CSS强制修正：

.dropdown-menu {
    text-align: left !important; /* 覆盖可能的自定义样式 */
    padding-left: 0.75rem; /* 可选：调整内边距让对齐更舒服 */
}

小提醒 #

• 别忘了引入jQuery和Popper.js，Bootstrap 4的下拉组件依赖这俩，不然点了没反应
• dropdown-menu-left是Bootstrap官方提供的类，兼容性拉满，比自己写定位CSS靠谱多了
• 如果你的导航栏是右对齐的（比如加了justify-content-end），这个类简直是救星，能避免菜单超出屏幕

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