对齐twitter bootstrap下拉菜单 [英] alignment for twitter bootstrap dropdown-menu

问题描述

我设计了一个带有下拉菜单的引导导航栏

I have designed a bootstrap navbar with dropdown menu

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

有没有办法更改下拉菜单的默认对齐方式（从

Is there a way to change the default alignment for the dropdown-menu (from left to center / right) so the arrow would display in center / right?

推荐答案

JSfiddle与你的例子 http://jsfiddle.net/shail/fex8N/5/

JSfiddle with your example http://jsfiddle.net/shail/fex8N/5/

将以下代码更改为您喜欢将下拉插槽插入中心：

change the following code to your liking to center the drop down 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 /

   }

li元素到右边：

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

将li元素与中心对齐：

To align the li elements to the center :

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

这篇关于对齐twitter bootstrap下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！