twitter bootstrap 下拉菜单的对齐方式

Posted 2023-03-06

【中文标题】twitter bootstrap 下拉菜单的对齐方式

【英文标题】：alignment for twitter bootstrap dropdown-menu

【发布时间】：2013-02-13 10:39:08

【问题描述】：

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

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;    

有没有办法更改下拉菜单的默认对齐方式（从左到中/右），以便箭头显示在中/右？

【问题讨论】：

到 JSFiddle 的链接已损坏，显示 404 错误

【参考方案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 /

   

将 li 元素对齐到右侧：

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

将 li 元素对齐到中心：

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

【讨论】：

jsfiddle 链接现在是 404

【参考方案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>

【参考方案3】：

我已经在我的项目中实现了这个，并在下面的链接中回答了。

https://***.com/a/21849528/2026261.

【参考方案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>

通过这种方式，您可以根据您的选择将菜单左对齐或右对齐。