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

Question

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

我试过在它上面设置 pull right，在品牌形象上设置 pull-left，但没有成功。

我假设我在 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>

但我建议您实现一个带有折叠菜单的移动切换按钮，以改善您的用户体验。