css - 如何将Bootstrap的下拉菜单放置在 float 右切换元素的右侧？

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

它可以在下面的链接上工作。下拉菜单位于toggle元素的右侧。

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

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

但是，我实际上想做的是使toggle元素浮动到右侧（标题的结尾），如下所示：

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

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

我正在将Bootstrap与Angular UI指令一起使用。但是，我可以确定问题是与CSS相关的。

一旦我真正发现这是问题所在，我尝试过的是设置相对于元素的位置，并使用right: 0重新放置下拉菜单，但这没有用。

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

谢谢。

最佳答案

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

...适用于您的第二个朋克将达到目的。

附带说明，您不应将position:relative内联应用于.panel-heading。您只能通过CSS进行一次。如果要确保不影响项目的其余部分，请为选择器添加特定的ID前缀。在您的情况下，#right-box似乎适合该工作：

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

关于css - 如何将Bootstrap的下拉菜单放置在 float 右切换元素的右侧？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42519456/