我正在使用 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/
谢谢
最佳答案
我使用 jQuery 解决了这个问题,计算并调整了每个子菜单的 margin-left。
这样我的导航项之间就有了相同的间距。
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);
});
}
}
关于html - 如何在 Twitter Bootstrap 中将导航下拉菜单居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15140206/