html - Twitter Bootstrap 居中响应式导航栏

Question

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

基本上，对于平板电脑和手机设备，我想要一个两行导航栏，因此品牌名称位于顶部，导航链接位于其下方。

我可以让品牌名称在屏幕上居中，但当我尝试将相同的样式应用于导航链接时，它会卡在左侧。

这是演示此问题的 fiddle : 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;
  }
}