Ausrichtung für twitter Bootstrap-Drop-Down-Menü

Question

ich eine Bootstrap-navbar mit Drop-Down-Menü

http://jsfiddle.net/yabasha/fex8N/3/

<nav class="navbar navbar-inverse"> 
<div class="navbar-inner"> 
    <ul class="nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </li> 
    </ul> 
</div> 

ul.nav li.dropdown:hover > ul.dropdown-menu{ 
display: block;  
} 

entworfen habe, ist es eine Möglichkeit, die Standardausrichtung für die Dropdown-Fenster geändert -Menü (von links nach Mitte/rechts), so dass der Pfeil in der Mitte/rechts angezeigt würde?

Answer 1

JSfiddle mit Ihrem Beispiel http://jsfiddle.net/shail/fex8N/5/

Änderung der folgende Code nach Ihren Wünschen das Dropdown-caret zum Zentrum:

.navbar .nav > li > .dropdown-menu:after { 

left: 83px; /change to your liking/ 

} 
.navbar .nav > li > .dropdown-menu:before { 

left: 83px; /keep values in after and before same/

    } 

Um die li-Elemente auf der rechten Seite ausrichten:

.dropdown-menu > li > a { 
      text-align:right; 
    } 

Um die Elemente li an der Mitte auszurichten:

.dropdown-menu > li > a { 
      text-align:center; 
    } 

Answer 2

Es ist besser, die Verwendung von px für die Positionierung zu vermeiden, da sich die Dropdown-Breite ändern kann. Dies wäre besser geeignet für die Zentrierung des caret:

.navbar .nav > li > .dropdown-menu.pull-center:after { 
    left: 50%; 
    margin-left: -6px; 
} 
.navbar .nav > li > .dropdown-menu.pull-center:before { 
    left: 50%; 
    margin-left: -7px; 
} 

Für richtige Ausrichtung, Sie müssen nur die Klasse hinzuzufügen pull-right auf die Drop-Down-:

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

Answer 3

Ich habe implementiert dies in meinem Projekt und beantworten im unteren Link.

https://stackoverflow.com/a/21849528/2026261.

Answer 4

<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;"> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Write Post</a></li> 
     <li><a href="#">Posts List</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
    <label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label> 
    <span class="caret" data-toggle="dropdown"></span> 
    </div> 

Auf diese Weise können Sie Menü nach links oder rechts nach Ihrer Wahl ausrichten.