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

Question

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

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

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

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

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

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

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

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

谢谢。

Answer 1

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

...应用于您的第二个 plunkr 即可。

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

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

How to position Bootstrap's dropdown menu to the right of a floating right toggle element?