如何将 Bootstrap 的下拉菜单定位到浮动右切换元素的右侧？答案

【问题标题】：How to position Bootstrap's dropdown menu to the right of a floating right toggle element?如何将 Bootstrap 的下拉菜单定位到浮动右切换元素的右侧？
【发布时间】：2017-02-28 21:53:52
【问题描述】：

好的，标题应该是不言自明的。是的，我可以在 bootstrap 文档中看到他们已经添加了 dropdown-menu-right 类，这样它就可以在类似于我的情况下工作。

它有点适用于下面的链接。下拉菜单位于切换元素的右侧。

（下拉菜单位于第二个选项卡上）

http://plnkr.co/edit/gkbEkv86dTTvWZCAeUp0?p=preview

但是，我实际上想要做的是让切换元素向右浮动（到标题的末尾），如下所示：

http://plnkr.co/edit/0qMNLgabRrfAC2Evw1ri?p=preview

但如您所见，下拉菜单仍显示在与以前相同的位置。它忽略了切换元素现在位于右侧的事实。

我正在使用 Bootstrap 和 Angular UI 指令。但是，我很确定问题是 CSS 相关的。

一旦我真正发现这是问题所在，我尝试的是相对于元素进行设置并使用 right: 0 重新定位下拉列表，但它不起作用。

有人知道如何让下拉菜单的切换元素向右浮动，然后显示下拉菜单以考虑浮动吗？

谢谢。

【问题讨论】：

标签： css twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

.panel-heading > .dropdown {
   position: static;
}

...应用于你的第二个 plunkr 就可以了。

附带说明，您不应将position:relative 内联应用于.panel-headings。你应该只做一次，通过CSS。如果您想确保不影响项目的其余部分，请在您的选择器前面加上一个特定的 id。在你的情况下，#right-box 似乎适合这份工作：

#right-box .panel-heading { position: relative; }

【讨论】：

我不明白static 是如何让它工作的，但是是的，它工作了，谢谢。此外，出于某种原因，它仅在panel-heading 具有position: relative 时才有效。这实际上是我尝试完成这项工作时留下的。既然需要它，我将按照您的建议使用容器的 Id 作为前缀。
position:static 表示“未定位”，是任何HTML 元素的position 的默认值。通过覆盖（取消）.dropdown（来自 Bootstrap）上的 position:relative，您所做的是使您的 .dropdown-menu 相对于其下一个 positioned 父级（而不是 static）定位自身。为了正常工作，该父级需要为.panel-heading。
哦，我现在明白了。谢谢。