修改twitter bootstrap导航栏

Question

Ive been trying to modify the twitter bootstrap navbar, at the moment all the links are aligned to the left, when what i would really like is the have them central.

In a different post i read that you use this

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

But this did not work for me

What do i need to change in the css to make this happen, i understand i put the modified css in the bootstrap and overrides.

Any help appreciated

this is my markup

layouts/application

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

I've also tried this

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}

Answer 1

You can center your nav menu by setting your menu items to display:inline-block instead of float:left like so:

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

 .navbar-inner {
    text-align:center;
}

Though i suggest you create your own class to target your navbar menu that you wish to center, this way you won't bother the bootstrap default values and mess with other nav sections you may have in your page. You can do it like so:

^{Notice the .center class in the navbar container}

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

And then you can target the .center class like so:

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

Demo: http://jsfiddle.net/C7LWm/show/

Edit : Forgot to realign the submenu items to the left, this is the fix:

CSS

.center .dropdown-menu {
    text-align: left;
}

Demo: http://jsfiddle.net/C7LWm/1/show/

Answer 2

I know this is an old post but I have also noticed this post a few times in my googling. I want to actually set the record straight for centering the navbar in twitter bootstrap as the current accepted method is not wrong, but not needed as twitter bootstrap supports this.

There is actually a better way of doing this then modifying it manually. This will cut down of code by using what is already in twitter bootstrap.

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

First line is pretty simple as we are creating the navbar, setting it to a fixed position on the viewport to the top and then swapping the white to black by inverting the color theme.

Next we are going to assign the navbar-inner which more or less says, if at all possible, set a minimum hight and this is where the actual color stylings come from, not the line above.

Here is the line as we are dropping the fluid layout for the navbar and going with just a container. This sets a fixed with with margins that center aligns the inner content to the screen. This is done through having auto margins, and setting a width.

This method will do what you want as you actually save kb in header requests by not adding extra code and using the scaffolding properly with twitter bootstrap and not having extra code bloat. I have used this method in my own projects and continue to use it in my current project. The hazard with modifying TBS(twitter bootstrap) is that you lose code consistency and if in the future you want to change things you have to make a mental note of what you have changed otherwise things may not work as intended.

Hope this helps. Also if you want a working example just look at the homepage of twitter bootstrap as it has just that.

Answer 3

Ah and also, if you wish for spaces on both sides (before "Project Name" and after "Dropdown") to be symmetrical, add the following:

.navbar .nav, .navbar .nav > ul
{
    float: right
}

Also, it seems that using the following (as of Bootstrap v2.0.4) doesn't center the navbar still:

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container-fluid">
        .
        .
        .
        </div>
      </div>
</div>

You need to change to

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container">
        .
        .
        .
        </div>
      </div>
</div>

(Extracted from the sample provided by Andres llich; just that he missed out the change)

Now it works for me...

Answer 4

The centering css from above works well on un-collapsed navbars only.

It's not ideal when the navbar is collapsed, though. By default, each collapsed navbar item is on its own row, like a drop down menu. But the css above tries to shove all collapsed items onto the same row, which is less than ideal.

I used this small fix of wrapping the centering css in a media query, so it gets triggered on non-collapsed navbars only:

@media (min-width: 768px) {
    .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;
    }
}

(tested with bootstrap 3.1.1)