在Bootstrap 3中如何修复导航栏？

Question

在Bootstrap 3中如何让导航栏权限在移动设备上正常工作？在我的项目中，由于某种原因，当浏览器缩小时，它会将我的导航栏项放在下一行。

我已尝试在其上设置右拉，并在品牌形象上设置左拉，但没有运气。

我假设我在Bootstrap或我需要添加的类中做错了。请帮忙。

以下是移动设备上的内容：

以下是我希望它在移动设备上的样子：

在桌面上它运行正常。

这是我的navbar html：

<header>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
       <a href="/">
         <img src="/assets/dot-logo-91x50.png">
       </a>
      </div>
      <div class="navbar">
        <ul class="nav navbar-nav navbar-right">
          <a class="navbar-brand" href="/apply/">Continue Application</a>
        </ul>
      </div>
    </div>
  </nav>
</header>

请帮忙。

Answer 1

在Bootstrap 3样式之后，您的navbar元素应在响应式分辨率时显示移动切换按钮，例如此example。

如果您只希望界面中的这两个元素位于navbar元素内的相同位置，则可以按如下方式修改html：

<header>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">
          <img src="/assets/dot-logo-91x50.png">
        </a>
        <a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
      </div>
    </div>
  </nav>
</header>

但我建议您使用折叠菜单实施移动切换按钮，以改善用户体验。