Bootstrap Navbar Spacing

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="navbar justifiedNav">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li><a href="#tab1" class="active">
            <span class="number">2</span>
            <span class="desc">
                <i class="icon-ok"></i>
                Détail
            </span>
        </a></li>
        <li><a href="#tab2">
            <span class="number">2</span>
            <span class="desc">
                <i class="icon-ok"></i>
                Détail
            </span>
        </a></li>
        <li><a href="#tab3">
            <span class="number">3</span>
            <span class="desc">
                <i class="icon-cog"></i>
                Configuration
            </span>
        </a></li>
      </ul>
    </div>
  </div>
</div>






<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/23344406/1366033'>number of items in bootsrap navbar</a><br/>                
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>

CSS

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar.justifiedNav .navbar-inner {
    padding: 0;
}
.navbar.justifiedNav .nav {
    margin: 0;
    display: table;
    width: 100%;
}
.navbar.justifiedNav .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}
.navbar.justifiedNav .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}
.navbar.justifiedNav .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar.justifiedNav .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}