Css twitter引导：如何跨越导航栏中的链接？

我尝试了一些选项，但我无法获得跨越导航栏的4个链接。我认为将

span3

类添加到每个

会很容易。 这是我的HTML：

    <div class="navbar center">
      <div class="navbar-inner">
        <div class="container row">
            <ul class="nav span12">
              <li class="active span3">
                <a href="#">Home</a>
              </li>
              <li class="span3"><a href="#">Link</a></li>
              <li class="span3"><a href="#">Link</a></li>
              <li class="span3"><a href="#">Link</a></li>
            </ul>
        </div>
      </div>
    </div>

我所能做到的就是：

---

如何将这四个链接跨到同一行？

使用

spanX

并不是最好的解决方案（除非您使用的是bootstrap-resonsive.css，请参见下文）。您可以使用百分比，只要您愿意在导航栏中的项目数更改时修改CSS

可以使用默认的导航栏标记执行此操作：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

更新

如果您使用的是响应引导CSS，则可以使用内置的

spanX

类，如下所示：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav row-fluid">
                <li class="span4"><a href="#">Home</a></li>
                <li class="span4"><a href="#">Link</a></li>
                <li class="span4"><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

---

您做了一个很好的开始，但您的标记没有反映真正的网格：

• 您没有将

  .spanX

  放入

  .span12

• .container

  和

  .row

  可能具有冲突的属性

这似乎与此有关：

---

和

@pef虽然它工作正常，但您不需要像那样固定宽度。即使使用流体网格。检查我的答案。而且反应迅速！=流体：您可以使用

.row流体

，而不使用响应部件。@Sherbrow是的，但我没有设法使用.spanX对其进行排序，因此我选择了宽度解决方案，因为在我的情况下，它在移动视图中具有更好的行为。谢谢你的解决方案，我也投了赞成票。

.navbar-inner ul.nav {
  margin-right: 0;
  float: none;
  width: 100%;
}
.navbar-inner ul.nav li {
  width: 33%;
  text-align: center;
}

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav row-fluid">
                <li class="span4"><a href="#">Home</a></li>
                <li class="span4"><a href="#">Link</a></li>
                <li class="span4"><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

.navbar-inner ul.nav li {
    text-align: center;
}