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

问题描述：

我试了几个选项，但我无法设法获得4个链接跨越导航栏。我认为将span3课程添加到每个<li>是相当容易的。这里是我的HTML：twitter bootstrap：如何跨越导航栏中的链接？

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

所有我已经成功地得到的是这个：我怎样才能得到跨越同一行的四个链接？

答

使用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>的宽度的百分比。如果你有4项，然后将其设置为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

UPDATE

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

Works gre在，谢谢！ – PEF 2012-08-07 18:57:21

@pef虽然它的工作，你不需要修复这样的宽度。即使是流体网格。检查我的答案。 **响应！=流体**：您可以在没有响应部分的情况下使用'.row-fluid'。 – Sherbrow 2012-08-07 19:03:14

@Sherbrow是的，但我没有设法使用.spanX进行排序，所以我选择了宽度解决方案，更重要的是，因为在我的情况下，它在移动视图中具有更好的行为。感谢您的解决方案，我也赞同。 – PEF 2012-08-07 19:13:34

答

你做得很好，但你的标记并不反映真实的网格：

你不把.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：如何跨越导航栏中的链接？

相关推荐