Bootstrap Drop-Down: Positionierung von Drop-Down-Inhalte

ich habe folgende DropdownBootstrap Drop-Down: Positionierung von Drop-Down-Inhalte

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> 
    Action <b class="caret"></b></label> 
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> 
    dropdown content goes here 
</ul>

In der oberen linken Ecke des Drop-Down in der linken unteren Ecke des Textes (Action) ist, aber ich hoffe, dass die Position der oberen rechten Ecke des Dropdwon befindet sich an der unteren rechten Ecke des Textes. Wie kann ich das machen?

Dank und Grüße.

Quelle

2013-07-28 curious1

130

Edit:

Ab v3.1.0, haben wir .pull rechts auf Dropdown-Menüs ist veraltet. Um ein Menü rechtsbündig auszurichten, verwenden Sie .dropdown-menu-right. Rechtsbündige nav Komponenten in der Navbar verwenden eine Mixin-Version dieser Klasse, um das Menü automatisch auszurichten. Um es zu überschreiben, verwenden Sie .dropdown-menu-left.

Sie können die 'Drop-Down-right' Klasse verwenden, um die rechte Seite des Menüs mit dem caret bis Zeile:

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu dropdown-menu-right"> 
    <li>...</li> 
    </ul> 
</li>

Arbeits Geige hier: http://jsfiddle.net/jaq54yw8/

Ich habe meine vorherige Antwort unten gelassen, nur für den Fall, dass jemand Bootstrap < 3.1.0 verwendet, aber Sie sollten im Allgemeinen die oben genannten verwenden (und wenn es nicht funktionieren scheint ing überprüfen Sie die Versionsnummer des Bootstraps, den Sie enthalten)!

Sie können die ‚Pull-right‘ Klasse die rechte Seite des Menüs mit dem caret bis Zeile:

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu pull-right"> 
    <li>...</li> 
    </ul> 
</li>

Quelle

2013-10-08 16:52:17

Das funktioniert für mich in B3 und scheint besser. Ich wählte deine als Antwort. Vielen Dank!!! – curious1

Ich habe auf der RTL-Website Pull-Right und Pull-Links getestet. Sie funktionieren perfekt, aber Drop-Down-Menü-rechts und Drop-Down-Menü-links nicht. – curious1

Der Container (.dropdown) muss eine Anzeige von "inline-bock" haben. In diesem Beispiel ist der LI in Ordnung, aber wenn es ein DIV wäre, würde die Ausrichtung am Ende des Blockelements platziert werden, das durch die Submenübreite beeinflusst wird. – Nicholas

Ich bin mir nicht sicher, wie andere Leute dieses Problem lösen oder ob Bootstrap irgendeine Konfiguration dafür hat.

fand ich diesen Thread, der eine Lösung bietet:

https://github.com/twbs/bootstrap/issues/1411

Einer der Post schlägt die Verwendung von

<ul class="dropdown-menu" style="right: 0; left: auto;">

I getestet und es funktioniert.

Hoffe zu wissen, ob Bootstrap bietet Config dafür, nicht über die oben genannten CSS.

Prost.

Quelle

2013-07-28 04:38:27 curious1

Danke, das hilft es leicht zum Laufen zu bringen. –

Ja! Danke @ curious1 –

Bootstrap hat eine Klasse für den navbar-right genannt. So wird Ihr Code wie folgt aussehen:

<ul class="nav navbar-right"> 
    <li class="dropdown"> 
     <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a> 
     <ul class="dropdown-menu"> 
     <li>...</li> 
     </ul> 
    </li> 
</ul>

Quelle

2014-08-19 19:17:33

zu bekommen Sehen Sie nicht die OP erwähnt die Navbar .. – knownasilya

Basierend auf Bootstrap doc:

Ab v3.1.0, .pull rechts auf Dropdown-Menüs ist veraltet. verwenden.Drop-Down-Menü rechts

zB:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

Quelle

2014-12-06 04:50:36 ninetiger

Ich testete Pull-rechts und Pull-Links in RTL-Website. Sie funktionieren perfekt, aber Drop-Down-Menü-rechts und Drop-Down-Menü-links nicht. – curious1

-3

Verwendung dieser Code:

<ul class="dropdown-menu" role="menu"> 
    <li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li> 
</ul>

Quelle

2015-02-18 18:45:50

Ich glaube nicht, dass das tut, was er fragt –

Wenn Sie will das Drop-down zum Zentrum, das ist die Lösung.

<ul class="dropdown-menu" style="right:auto; left: auto;">

Quelle

2016-01-31 04:59:08

Wenn Sie das Menü angezeigt werden soll, fügen Sie einfach die Klasse „dropup“
und entfernen Sie die Klasse „Drop-Down“, wenn aus dem gleichen div existiert.

<div class="btn-group dropup">

Quelle

2016-10-11 09:01:30

"Ich hoffe, dass die Position der oberen rechten Ecke des dropdwon an der unteren rechten Stelle des Textes ist" - OP –

Ich kann Sie nicht verstehen Kommentar, sorry! ! –

Bootstrap Drop-Down: Positionierung von Drop-Down-Inhalte

Antwort

Verwandte Themen