Question

我正在尝试在我的页面上创建一个非常简单的导航栏。我无法在移动设备上的导航栏右侧对齐内容。我不是想做任何崩溃或任何事情，我真的只是希望移动导航栏看起来就像桌面版。

我的问题出在移动设备上，我的右对齐内容出现在我的标题下面，如下所示：

我现在如何在桌面上拥有它是我非常想要它的方式。我也想垂直对齐导航栏中的按钮，但我可以处理那个部分：

这是我的代码：

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">Favorite List</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><button type="button" class="btn btn-default">Default</button></li>
        <li><button type="button" class="btn btn-default">Default</button></li>
        <li><button type="button" class="btn btn-default">Default</button></li>
      </ul>
    </div>
  </nav>

Answer 1

我解决了这个问题。

在您的智能手机视图中使用此css：

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
    display: inline-block;
    float: left;
}

.navbar-nav {
    margin: 7.5px -15px;
    display: block;
    float: right;
}

.nav>li {
    position: relative;
    display: inline-block;
}
.navbar-default .navbar-brand {
    color: #777;
    font-size: 15px;
}

在移动设备上将内容与Bootstrap Navbar对齐

1 个答案: