Twitter Bootstrap以响应式导航栏为中心

Question

我正在尝试在Twitter Bootstrap中创建一个网站，但是在使用响应式设计时我遇到了使导航链接居中的问题。

基本上，对于平板电脑和手机设备，我想要一个双排导航栏，顶部是品牌名称，下面是导航链接。

我能够将品牌名称集中在屏幕上没问题，但是当我尝试将相同的样式应用到导航链接时，它会卡在左侧。

以下是演示此问题的小提琴： http://jsfiddle.net/AsGHB/5/

以下是相关的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;
  }
}