3

我正在使用 Twitter Bootstrap 开发一个主题，我试图让下拉导航居中而不是左对齐。需要明确的是：我说的是相对于其父级将整个下拉框居中，而不是在框内居中文本。

标记如下所示：

<ul id="nav" class="nav ww-nav pull-right hidden-phone">
  <li class="active"><a href="#">Words</a></li>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Published</a></li>
        <li><a href="#">Categorized</a></li>
        <li><a href="#">Uncategorized</a></li>
        <li><a href="#">Award Winning</a></li>
    </ul>                   
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

为了澄清我的意思，我将附上截图：

引导下拉菜单

注意：我正在寻找适用于不同父项的通用解决方案。由于它是一个主题，导航项可以是 3 个字符到 20 个字符宽的任何内容。不幸的是，一个简单的 X 像素边距并没有削减它。

PS：按照评论中的要求，我把整个事情放在了 JSFiddle 上：http: //jsfiddle.net/zdCYX/4/

谢谢

4

2 回答 2

10

我使用 jQuery 解决了这个问题，计算和调整每个子菜单的左边距。

这样我的导航项之间就有相同的空间。

document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        $("ul.ww-nav ul.dropdown-menu").each(function(){
            var parentWidth = $(this).parent().innerWidth();
            var menuWidth = $(this).innerWidth();
            var margin = (parentWidth / 2 ) - (menuWidth / 2);
            margin = margin + "px";
            $(this).css("margin-left", margin);
        });
    }
}
于 2013-03-04T15:52:03.127 回答
1

浏览器中的Jsfiddle演示
您可以做的是将宽度设置为主导航元素，而不是下拉：如下所示：

 .navbar .nav > li {

   width: 116px;
     }

.dropdown-menu {
      display:none;
      width:116px;
      min-width:116px;
      margin:0 auto;
  }

您将不得不更改以下代码对齐元素

.dropdown-menu > li > a {
         text-align:center;
}
于 2013-02-28T16:12:11.130 回答