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

Question

好吧，标题应该是自我解释的。是的，我可以在引导文档上看到他们添加了类dropdown-menu-right，以便在类似于我的情况下起作用。

它有点在下面的链接上起作用。下拉列表位于切换元素的右边。

（下拉列表在第二个选项卡上）

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

但是，我实际上要做的是使右侧的切换元件向右浮动（直到标题的末端），例如：

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

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

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

一旦我实际发现这是问题，我尝试的是相对于元素设置并将下拉列表重新定位为right: 0，但它不起作用。

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

谢谢。

Answer 1

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

...应用于您的第二个plunkr将有能力。

作为旁注，您不应将position:relative内联应用到.panel-heading s。您应该仅通过CSS进行一次。如果要确保不会影响项目的其余部分，请在选择器上以特定的ID前缀。就您而言，#right-box似乎适合这份工作：

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