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

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-menu 上使用 CSS 绝对定位来实现此目的，如下面的代码所示。

有关演示，请参阅 this JSFiddle。

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

备注

在Bootstrap3中，class.dropdown已经有了position:relative;，而.dropdown-menu通常是.dropdown的后代，所以你可以绝对-根据 .dropdown.
当您指定 .dropdown-menu 的宽度时，请确保您指定的宽度不小于将由菜单内容决定的最小宽度（例如，在本例中，10rem太瘦了）。 .dropdown-menu 的 width 和 right 样式应该是相等和相反的值。

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

Align dropdown menu to the absolute right of the button despite the parent container

html

css

menu

twitter-bootstrap

备注