更改引導程序下拉菜單的方向

如何更改Twitter Bootstrap dropdown的方向？更改引導程序下拉菜單的方向

我有這樣一個下拉：

What I have

但我希望它看起來像這樣：

What I want

2013-04-23 Rachid Oussanaa

做你想做的實際「**下拉v **」是在右邊，但是當你打開它的箭頭已打開的列表在左側？ – 2013-04-23 12:01:32

只需添加一個類'.navbar .nav> li> .dropdown-menu.dropdown-menu-fixed：after，.navbar .nav> li> .dropdown-menu.dropdown-menu-fixed：before {left：auto ;正確：10px;}'。而已。 – dfsq 2013-04-23 12:05:39

使用pull-right或pull-left類。

來源

2013-04-23 10:41:35 slash197

拉右會迫使整個下拉列表顯示在父母的右側 – 2013-04-23 10:46:42

@ParvSharma，這正是他想要的 – slash197 2013-04-23 10:49:22

他只是想在頂部箭頭顯示在另一側 – 2013-04-23 10:50:56

-1

Twitter Bootstrap似乎沒有選項來處理下拉菜單的方向。所有這一切對箭頭的位置有一定的影響是該類.navbar .nav > li > .dropdown-menu:before嘗試與它擺弄查看下降的方向變化下

來源

2013-04-23 10:46:02

transform: rotateY或-webkit-transform:rotateY會做的伎倆，讓我們應用它的下拉菜單;

navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right { 
    -webkit-transform: rotateY(180deg); 
}

或者，你可以插入.dropdown-menu或.open > .dropdown-menu類這是由於您的確切rquirement。現在，它看起來像：

drop1

可以看到所有的鏈接需要被還原所以它的簡單使用相同的CSS規則做：

.dropdown-menu > li > a { 
    -webkit-transform: rotateY(180deg); 
}

現在，它看起來像：

drop2

需要通過更改下拉菜單的位置left:10px;來清理一下，它會看起來像確切Ÿ你怎麼想：

final result

來源

2013-04-23 11:52:04

聖牛。非常有創意，但圖書館已經通過菜單上的'pull-xxx'類支持它。 – Joshua 2014-02-03 21:12:10

@Joshua我知道圖書館有'拉-xx'，因爲我知道有一個名爲Bootstrap的庫。但請仔細閱讀op的要求和我提供的用於翻轉矩形上箭頭的答案。 – 2014-02-04 07:12:28

您的解決方案仍然很古怪（但很有創意！）。最好重寫下拉菜單的CSS，調整箭頭本身的位置。這個轉換創造了更多的CPU負載，並且還可能引入錯誤。 – Joshua 2014-02-04 14:55:14

從http://getbootstrap.com/components/#dropdowns-alignment：

棄用.pull右對齊
作爲V3.1.0中，我們已經棄用 .pull右在下拉菜單上。要正確對齊菜單，請使用 .dropdown-menu-right。導航欄中右對齊的導航組件使用該類的一個 mixin版本來自動對齊菜單。若要覆蓋它，請使用.dropdown-menu-left。

在你的情況，增加dropdown-menu-right類到具有dropdown-menu類的div應該做的伎倆。

來源

2014-08-18 13:04:34 kubilay

這（使用下拉菜單右）：

<ul class="dropdown-menu dropdown-menu-right"> 
    <li><a href"#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
<ul>

來源

2017-02-15 07:40:47

更改引導程序下拉菜單的方向

回答

相關問題