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;
}

使用上面的代码，我得到了一个居中的菜单栏，但菜单项都在左边，右边有很大一部分菜单栏是空的。我希望菜单居中，并且与包含菜单项所需的宽度一样宽。

现在看起来像这样（但以页面为中心）<--Home--About--Content--More------------>

我想要这个并且仍然以页面为中心 <--Home--About--Content--More-->

我不想在引导 css 中摆弄，但我完全可以制作自己的 css 定义。

4

1 回答 1

0

我刚刚做了一个小例子，你可以用它来做你想做的事

这是链接：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-04T09:59:54.863 回答