左側導航欄項目的左側的Bootstrap 3導航欄折疊菜單

Question

我有一個帶有左側導航項和右側導航項的Bootstrap 3導航欄（如下所示）。

折疊后，我希望導航欄切換（又稱“漢堡菜單”）及其項目保持對齊。

到目前為止，我的代碼：

<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

在左側具有navbar-toggle的CSS是：

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
        margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

我添加了“向右拉”樣式以使項目對齊，但沒有成功。

“導航欄右”效果很差。 實際上，有了它，我將在同一行中同時包含兩個右側項目。 使用“向右拉”，它們可以作為單行工作，但仍保持在右邊。

這給我留下了：

• 左側的漢堡菜單（根據需要），
• 左側的導航欄左側項目（根據需要），
• 導航欄右邊的項目仍然在右邊 （我希望此問題得到解決！）。

最終結果：

代碼段在這里 。

Answer 1

我對您的CSS和標記做了一些調整，您可以在此處查看。

我要指出的一件事是， pull-right和其他pull和push類是用於重新排列網格列的。

Answer 2

您可以使用!important規則來覆蓋右上角的默認行為。

@media (max-width:767px) {
 .nav.navbar-nav.pull-right {
   float: left !important;
 }
} 

在<768px設備中輸出：

自舉