twitter bootstrap: How to span links in the navbar?

Question

I've tried a few option but i can't manage to get 4 links to span across the navbar. I thought it would be quite easy to add the span3 class to each <li>. Here's my 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>

To center the links I've used the solution described here: Modify twitter bootstrap navbar

Here's the 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;
}

All I've managed to get is this: How can I get those four links spanned on the same row?

jackwanders · Accepted Answer · 2012-08-07T18:56:40.213

Using spanX is not the best solution here (unless you're using bootstrap-resonsive.css, see below). You can uses percentages, as long as you're willing to modify you CSS when the number of items in the navbar changes.

You can make this work with default navbar markup:

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

And two CSS rules. The first removes the margin on the <ul class="nav">, removes the float and sets its width to be 100% of its container (in this case, the <div class="container"> within <div class="navbar-inner">.

The second rule sets the width of each <li> to be a certain percentage of the width of the <ul>. If you have four items, then set it to 25%. If you have five, it'd be 20%, and so on.

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

jsFiddle DEMO

UPDATE

If you are using the responsive bootstrap CSS, you CAN use the built-in spanX classes, like so:

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

Then, all the CSS you need is:

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

jsFiddle DEMO

@pef although it's working, you don't need to fix the width like that. Even with the fluid grid. Check my answer. And **responsive != fluid** : you can use `.row-fluid` without the responsive part. — Sherbrow, Aug 07 '12 at 19:03
@Sherbrow yes, but I didn't manage to get it sorted with .spanX, so I went for the width solution, all the more because in my case it has a better behaviour in mobile view. Thanks for your solution, I've upvoted as well. — PEF, Aug 07 '12 at 19:13

score 1 · Answer 2 · answered Aug 07 '12 at 19:00

You did a good start but your markup doesn't reflect the real grid :

You don't put .spanX in a .span12
.container and .row might have conflicting properties

It seems to work with this :

<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) and fullscreen

twitter bootstrap: How to span links in the navbar?

2 Answers2