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

好的，标题应该是自我解释。是的，我可以在bootstrap文档中看到他们已经添加了类dropdown-menu-right，以便它可以处理类似于我的情况。如何将Bootstrap的下拉菜单放置在浮动右侧切换元素的右侧？

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

（Dropdowns的是第二个选项卡上）

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

然而，什么我真正想要做的是有肘节式元件浮到右侧（标题结束）像这样：

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

但你可以看到，在下拉菜单仍然在同一个地方像以前提出。它忽略了切换元素现在位于右侧的事实。

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

一旦我真的发现这是问题，我试过的是相对于元素进行设置，并重新定位与right: 0下拉，但它没有奏效。

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

谢谢。

来源

2017-02-28 Rodrigo Lira

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

...适用于你的第二个plunkr将做的伎俩。

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

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

来源

2017-02-28 22:25:17

我不明白怎么'static'使它工作，但，是的，它的工作，谢谢。此外，出于某种原因，它只适用于'panel-heading'具有'position：relative'。这实际上是我尝试做这项工作所剩余的。因为我需要它，所以我会按照你的建议以容器的Id作为前缀。 –

'position：static'表示*“未定位”*，并且是任何HTML元素的'position'的默认值。通过覆盖（取消）'.dropdown'（来自Bootstrap）的'position：relative'，你正在做的是让你的'.dropdown-menu'位置相对于它的下一个'position'ed父亲（而不是'static '）。为了正常工作，该父级需要是“.panel-heading”。 –

哦，我现在明白了。谢谢。 –

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

回答

相关问题