html - Twitter Bootstrap centering responsive navbar

Question

I am attempting to create a website in Twitter Bootstrap, but I am having an issue with centering the navigation links when using responsive design.

Basically, for tablet and phone devices I want a two row navigation bar, so brand name at the top and the navigation links below it.

I am able to center the brand name on the screen no problem, but when I try to apply the same styling to the navigation links it gets stuck on the left.

Here is the fiddle to demonstrate this issue: http://jsfiddle.net/AsGHB/5/

Here is the relevant CSS:

@media (max-width: 767px) { 

 #bn-logo {
  width: 100%;
  float: none;
  margin: 0 auto;
  text-align: center;
  }

 .navbar .nav {
   width: 100%;
   float: none;
   margin: 0 auto;
   text-align: center;
  }
}

Answer 1

添加以下代码：

@media (max-width: 767px)and (min-width: 480px) { 
  header{
    text-align:center;
  }
  .navbar .nav {
    float:none;
  }
  .navbar .nav > li {
    float: none;
    display: inline-block;
  }
}