Bootstrap 3导航栏左侧导航栏项左侧折叠菜单

我有一个带左导航项和右导航项的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>

在左边有导航栏切换的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;
    }
}

我已经添加了“拉右”风格来使项目保持一致，但没有成功。

“navbar-right”的效果很差。 事实上，有了它，我将在同一行中拥有两个右手边的物品。 使用“拉右”他们作为单行工作，但仍然保持在右侧。

这给我留下了：

左边的汉堡菜单（根据需要），

左侧的导航栏左边的项目（根据需要），

导航栏右侧的项目仍然在右侧（我希望这个被修复！）。

最终结果：

代码片段在这里。

---

我已经对您的CSS和标记进行了一些调整，您可以在这里查看。

我要指出的一点是， pull-right pull和其他push类是用于重新排列网格列。

---

您可以使用!important规则来覆盖拉右的默认行为。

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

在<768px设备中输出：

Bootply

链接地址: http://www.djcxy.com/p/94561.html

上一篇: Bootstrap 3 Navbar Collapse menu at Left for left and right navbar items

下一篇: Twitter Bootstraps Yamm3 dropdown floated right... strange?