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

问题描述

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

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

 < nav class =navbar navbar-inverse > 
< div class =navbar-inner> 
< ul class =nav> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< / ul> 
< / li> 
< / ul> 
< / div> 
  

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

有一种方法可以更改下拉菜单的默认对齐方式 http://jsfiddle.net/shail/fex8N/5/rel =nofollow> http://jsfiddle.net/shail/fex8N/5/

将以下代码更改为您希望将下拉式插入符置中：

  .navbar .nav> li> .dropdown-menu：after {
 
 left：83px; /改为你的喜好/ 
 
} 
 .navbar .nav> li> .dropdown-menu：before {
 
 left：83px; /保持值之前和之前的值/ 
 
} 
  

li元素到右侧：

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

将li元素对齐到中心：

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

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

   }

To align the li elements to the right side :

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

To align the li elements to the center :

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

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