Question

我使用bootstrap菜单有以下代码，但我似乎无法按照我的意愿使菜单工作。

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

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

现在看起来像这样（但以页面为中心）＆LT; - 首页 - - 内容 - 更------------＆GT;

我想要这个并且仍然在页面上＆LT; - 首页 - - 内容 - 更 - ＆GT;

我不想在bootstrap css中乱搞，但我绝对可以制作自己的css定义。

Answer 1

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

以下是链接：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项目分类

如何使引导菜单宽度作为元素总宽度的宽度？

1 个答案: