如何在移动网络中居中引导导航栏菜单？

Question

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.navhome {
  padding-right: 50px;
}

.navbar {
    text-align: center;

}

.container-fluid {
    display: inline-block;
}

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active navhome"><a href="#">Home</a></li>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
          <li><a href="#">Menu3</a></li>
        </ul>
    </div>
  </nav>

我无法将引导导航栏居中。 它在桌面浏览器中成功，但导航栏在移动浏览器中垂直显示。手机中的主页按钮也很奇怪。我希望在移动网络中水平对齐它。 任何帮助，将不胜感激！ mobile page

Answer 1

这就是导致对齐问题的原因 - .navhome { padding-right: 50px; }

如果您只想为大屏幕保留填充，您可以添加 media query。因此，这将确保仅为大于 768 像素的屏幕添加填充。

@media (min-width:768px){
  .navhome {
    padding-right: 50px;
  }
}

工作示例：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

@media (min-width:768px) {
  .navhome {
    padding-right: 50px;
  }
}

.navbar {
  text-align: center;
}

.container-fluid {
  display: inline-block;
}

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active navhome"><a href="#">Home</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
    </ul>
  </div>
</nav>