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

Question

我尝试了几个选项，但我无法让 4 个链接跨越导航栏。我认为将span3 类添加到每个<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 放入.span12
• .container 和 .row 可能有冲突的属性

它似乎适用于这个：

<div class="navbar center">
  <div class="navbar-inner">
    <div class="container">
        <div class="row">
            <ul class="nav">
              <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>
</div>

Demo (jsfiddle) 和 fullscreen

Answer 2

使用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"> 上的边距，删除浮动并将其宽度设置为其容器的 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

更新

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