alignment cho twitter bootstrap thả xuống menu

Question

tôi đã thiết kế một navbar bootstrap với menu thả xuống

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

Có cách nào để thay đổi căn chỉnh mặc định cho thả xuống -menu (từ trái sang giữa/phải) để mũi tên sẽ hiển thị ở giữa/phải không?

Answer 1

JSfiddle với ví dụ của bạn http://jsfiddle.net/shail/fex8N/5/

thay đổi đoạn mã sau theo ý thích của bạn để tập trung thả xuống caret:

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

    } 

Để sắp xếp các yếu tố li về phía bên phải:

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

Để căn chỉnh các phần tử li vào giữa:

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

Answer 2

Tốt hơn nên tránh sử dụng px để định vị, vì chiều rộng của trình đơn thả xuống có thể thay đổi. Đây sẽ là thích hợp hơn cho trung các 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; 
} 

Đối với liên kết bên phải, bạn chỉ cần thêm các lớp pull-right để thả xuống:

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

Answer 3

Tôi đã thực hiện điều này trong dự án của tôi và đã trả lời trong liên kết bên dưới.

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> 

Bằng cách này bạn có thể căn chỉnh menu sang trái hoặc phải tùy theo lựa chọn của mình.