css - 推特 Bootstrap : How to span links in the navbar?

Question

我已经尝试了几个选项，但我无法设法让 4 个链接跨越导航栏。我认为添加 span3 会很容易每个类(class) <li> .这是我的 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>

为了使链接居中，我使用了此处描述的解决方案:Modify twitter bootstrap navbar

这是 CSS:

.navbar-inner { 
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

我设法得到的是:如何让这四个链接跨越同一行？

Answer 1

使用 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 规则。第一个删除 <ul class="nav"> 上的边距, 删除 float 并将其宽度设置为其容器的 100%(在本例中为 <div class="container"> 内的 <div class="navbar-inner">。

第二条规则设置每个 <li> 的宽度为 <ul> 宽度的一定百分比.如果您有四个元素，则将其设置为 25% .如果你有五个，那就是20% , 等等。

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

jsFiddle DEMO

更新

如果您使用的是响应式 Bootstrap 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>

然后，您需要的所有 CSS 是:

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

jsFiddle DEMO