如何使引导菜单的宽度与元素的总宽度一样宽？

我有下面的代码使用引导菜单，但我似乎无法得到菜单工作，因为我也想。如何使引导菜单的宽度与元素的总宽度一样宽？

<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定义。

来源

2013-10-04 Jimmy.Bystrom

我只是做了一个痘痘的例子，你可以用做你想做

这里什么是链接：http://jsfiddle.net/t68nz/1/

CSS

.center-navbar 
{ 
    width: 80%; 
    margin: 0 auto; 
} 

.nav li { 
    width: 25%; 
    float:left; 
} 

.dropdown-menu li { 
    min-width:200px; 
} 

one-item{ 
width: 100%; 
} 

two-item{ 
width: 50%; 
} 

three-item{ 
width: 33.33%; 
} 

for-item{ 
width: 25%; 
}

然后用js代码，你有直接将课程分配给所有li项目

来源

2013-10-04 09:59:54 Romain

这样做只会让个人菜单项在菜单中使用相同的宽度，但菜单仍然是大。 –

我不明白你想要什么，http://jsfiddle.net/t68nz/4/ – Romain

我希望菜单的宽度足以根据需要封装尽可能多的菜单项，但最多只有80％的屏幕。如果我只有一个菜单项，菜单应该只有一个具有两个元素的元素居中，菜单栏应居中，宽度应足以封装两个菜单项。菜单中应该有多少菜单项应该没有关系。 –

如何使引导菜单的宽度与元素的总宽度一样宽？

回答

相关问题