在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元素應在響應式分辨率時顯示移動切換按鈕，如此示例中所示 。

如果您希望界面中只有這兩個元素位於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>

但我建議您使用折疊菜單實現移動切換按鈕，以改善用戶體驗。