响应式模式下如何将Dropdown选项设置为左对齐？

• 移除下拉菜单容器的dropdown-menu-right类，这个类是Bootstrap用于设置下拉菜单右对齐的核心样式类，移除后默认会恢复左对齐
• 若需要让菜单项内的图标与文字整体左对齐，把<i>标签上的float-right类改为float-left，同时调整内边距（比如将pr-2改为pl-2），保证图标与文字的间距合理

修改后的完整代码 #

<div class="dropdown">
    <i class="far fa-user-circle" type="button" data-toggle="dropdown" aria-expanded="false" style="font-size:36px"></i>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#"><i class="float-left fas fa-unlock-alt pl-2"></i>CHANGE PASSWORD</a></li>
        <li><a class="dropdown-item" href="#"><i class="float-left fa fa-user pl-2"></i>PROFILE</a></li>
        <li><a class="dropdown-item" href="#"><i class="float-left fa fa-sign-out-alt pl-1"></i>LOGOUT</a></li>
    </ul>
</div>

如果仅需下拉菜单整体左对齐、菜单项内图标位置保持不变，只需移除dropdown-menu-right类即可，无需修改图标相关样式。

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