выравнивания для выпадающего меню Twitter Bootstrap

Question

Я разработал самозагрузки Navbar с ниспадающего меню

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;  
} 

Есть ли способ изменить выравнивание по умолчанию для выпадающего списка -menu (слева направо/вправо), чтобы стрелка отображалась в центре/вправо?

Answer 1

JSfiddle с вашим примером http://jsfiddle.net/shail/fex8N/5/

изменений следующего кодом по своему вкусу центрирования раскрывающейся каретки:

.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/

    } 

Для выравнивания литиевых элементов в правую часть:

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

Для выравнивания элементов лития с центром:

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

Answer 2

Лучше избегать использования px для позиционирования, так как ширина выпадающего меню может измениться. Это было бы более подходящим для центрирования каретки:

.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; 
} 

Для правильного выравнивания, вам просто нужно добавить класс pull-right в раскрывающийся список:

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

Answer 3

Я реализовал это в моем проекте и ответил в нижней ссылке.

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> 

Таким образом вы можете выровнять меню влево или вправо в соответствии с вашим выбором.