Thay đổi hướng của menu thả xuống Bootstrap

Question

Làm cách nào để thay đổi hướng của Twitter Bootstrap dropdown?

Tôi có một thả xuống như thế này:

Nhưng tôi muốn nó trông như thế này:

Answer 1

Sử dụng pull-right hoặc pull-left lớp.

Answer 2

Dường như không có tùy chọn trong Twitter Bootstrap để xử lý chỉ đường trên menu thả xuống. Tất cả những gì có một số ảnh hưởng đến vị trí của mũi tên là lớp này .navbar .nav > li > .dropdown-menu:before Hãy thử không quan trọng với nó để xem những thay đổi theo hướng thả xuống

Answer 3

transform: rotateY hoặc -webkit-transform:rotateY sẽ làm các trick, hãy áp dụng nó cho các trình đơn thả xuống;

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

Hoặc bạn có thể chèn này vào .dropdown-menu hoặc .open > .dropdown-menu lớp do rquirement chính xác của bạn. Bây giờ có vẻ như:

Như có thể thấy tất cả các liên kết cần được hoàn nguyên do đó, nó đơn giản để làm với cùng một quy tắc CSS:

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

Bây giờ nó trông như:

Cần dọn dẹp một chút thông qua thay đổi vị trí của menu thả xuống theo left:10px; và nó sẽ giống như exactl y làm thế nào bạn muốn:

Answer 4

Từ http://getbootstrap.com/components/#dropdowns-alignment:

Không dùng nữa .pull bên phải liên kết
Tính v3.1.0, chúng tôi đã bị phản đối .pull bên phải trên các menu thả xuống. Để căn chỉnh menu, hãy sử dụng .dropdown-menu-right. Các thành phần điều hướng phù hợp trong thanh điều hướng sử dụng phiên bản kết hợp của lớp này để tự động căn chỉnh menu. Để ghi đè lên, hãy sử dụng .dropdown-menu-left.

Trong trường hợp của bạn, hãy thêm dropdown-menu-right lớp vào div có lớp dropdown-menu sẽ thực hiện thủ thuật.

Answer 5

Ở đây nó được (sử dụng thả xuống menu bên phải):

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