尽管有父容器，但将下拉菜单对齐到按钮的绝对右侧

Question

我有一个使用bootstrap构建的导航菜单。菜单中充满了按钮，一旦点击就会显示下拉菜单。

这是导航菜单：

如何更改以下代码以将下拉菜单与所选按钮的绝对右侧（右侧）对齐。尽管由父母div包含。

这是我的代码：

<div class="f_profile_add col-xs-12 col-sm-4 col-md-3 np">
            <nav>
                <ul class="list-unstyled nm">
                    <li>

                        <div class="dropdown">
                            <button id="btn-add-trybe" class="btn btn-block btn-default btn-lg rmr pbpad dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span class="glyphicon glyphicon-th"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>

                    </li>
                </ul>
            </nav>
</div>

点击按钮时会发生以下情况：

你能给我一个解决方案吗？

由于

更新

得到结果的代码如下：

.absolute-right-dropdown-menu {
    position: absolute;
    top: 0;
    left: 74px;
    /* Note opposite values */
    right: -20rem;
    width: 20rem;
}

我将其添加到下拉菜单中。导致以下结果：

Answer 1

您可以在.dropdown菜单中使用CSS绝对定位来实现此目的，如下面的代码所示。

请参阅this JSFiddle了解演示。

.dropdown ul.dropdown-menu {
    position: absolute;
    top: 0;
    /* Note opposite values */
    right: -20rem;
    width: 20rem;
}

备注

1. 在Bootstrap 3中，类.dropdown已经有position:relative;，而.dropdown-menu通常是.dropdown的后代，所以你可以根据它的.dropdown绝对定位.dropdown-menu。

2. 指定.dropdown-menu的宽度时，请确保指定的宽度不小于菜单内容确定的最小宽度（例如，在此示例中，10rem太瘦了）。 .dropdown菜单的width和right样式应该相等且相反。