html - 将内容与移动设备上的 Bootstrap Navbar 对齐

Question

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

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

Mobile

Desktop

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

这是我的代码:

  <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

我已经解决了这个问题。

在您的响应式移动 View 中使用此 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;
}