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