具有 dropdown-menu-right 类的下拉菜单不向右对齐

Posted 2023-03-05

【中文标题】具有 dropdown-menu-right 类的下拉菜单不向右对齐

【英文标题】：Dropdown menu with the dropdown-menu-right class does not align to the right

【发布时间】：2018-03-09 13:51:37

【问题描述】：

我有以下导航栏结构（ current_user.username 来自我的模板系统）：

<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <!-- navbar items -->
</ul>
<div class="dropdown show">
    <a class="dropdown-toggle" style="color: inherit" href="#" id="dropdownLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-user" aria-hidden="true"></i>
         current_user.username 
    </a>
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownLink">
        <li><a class="dropdown-item" href="#">Profile</a></li>
        <!-- etc -->
    </ul>
</div>

下拉部分与屏幕右侧对齐，但单击它会显示下拉菜单离开屏幕右侧，dropdown-menu-right 类应该阻止这种情况。有什么想法吗？

最小的 Codepen：https://codepen.io/Majora320/pen/jGwNrE

【问题讨论】：

你能不能把它放到一个jsfiddle里

@carinlynchin 我添加了一个 codepen.io 链接

太棒了。我去看看

【参考方案1】：

如果添加样式

right: 0

到

 .dropdown-menu

风格规则...它会做你想做的事。

【讨论】：

但是为什么dropdown-menu-right 不起作用？我相信这是它应该做的。

不确定，但文档说它可能需要额外的 css 才能正确对齐。我猜你还有其他影响它的风格...v4-alpha.getbootstrap.com/components/dropdowns

你必须有一个新的小提琴给我看。