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 。因此，这将确保为大于768px的屏幕添加仅填充。

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

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: