如何將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的下拉菜單放置在浮動右側切換元素的右側？

回答

相關問題