css - 如何将 Bootstrap 的下拉菜单定位到 float 右切换元素的右侧？

Question

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

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

(下拉菜单在第二个选项卡上)

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

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

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

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

我将 Bootstrap 与 Angular UI 指令一起使用。但是，我很确定问题出在 CSS 方面。

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

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

谢谢。

Answer 1

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

...应用到您的第二个 plunkr 就可以了。

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

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