如何在Twitter Bootstrap中将导航下拉？

Question

我正在使用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/

谢谢

Answer 1

我用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);
        });
    }
}