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不是最好的解决方案（除非你使用的是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

Answer 2

你做得很好，但你的标记并没有反映出真正的网格：

您未将.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

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

2 个答案: