1
我有下面的代码使用引导菜单,但我似乎无法得到菜单工作,因为我也想。如何使引导菜单的宽度与元素的总宽度一样宽?
<header class="navbar center-navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<div class="nav-collapse collapse nav-collapse-margin">
<ul class="nav">
<li><a href="Default.aspx">Home</a></li>
<li><a href="About.aspx">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Content
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="Content1.aspx">Content 1</a></li>
<li><a href="Content2.aspx">Content 2</a></li>
</ul>
</li>
<li><a href="More.aspx">More</a></li>
</ul>
</div>
</div>
</div>
</header>
中心,导航栏看起来像
.center-navbar
{
width: 80%;
margin: 0 auto;
}
有了上面的代码,我得到一个居中的菜单栏,但的菜单项都向左侧并没有为空在菜单栏的很大一部分正确的。我希望菜单居中,并且需要包含菜单项。
现在看起来是这样的(但在页面上居中) < - 首页 - 关于 - 内容 - 更------------>
我想这并仍然在页面 < - 首页 - 关于 - 内容 - 更多 - >
我不想在bootstrap css左右摆弄,但我确定无疑地使自己的CSS定义。
这样做只会让个人菜单项在菜单中使用相同的宽度,但菜单仍然是大。 –
我不明白你想要什么,http://jsfiddle.net/t68nz/4/ – Romain
我希望菜单的宽度足以根据需要封装尽可能多的菜单项,但最多只有80%的屏幕。如果我只有一个菜单项,菜单应该只有一个具有两个元素的元素居中,菜单栏应居中,宽度应足以封装两个菜单项。 菜单中应该有多少菜单项应该没有关系。 –