2

我尝试了一些选项，但我无法让 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>

为了使链接居中，我使用了此处描述的解决方案：修改 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;
}

我设法得到的是： 我怎样才能让这四个链接跨越同一行？

4

2 回答 2

4

在这里使用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">了<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 演示

更新

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

于 2012-08-07T18:44:24.017 回答
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>

演示（jsfiddle）和全屏

于 2012-08-07T19:00:14.643 回答