Javascript Bootstrap 3 导航栏左侧和右侧导航栏项目的折叠菜单

Bootstrap 3 Navbar Collapse menu at Left for left and right navbar items

提问by loretoparisi

I have a Bootstrap 3 navbar with left nav items and right nav items (as shown below).

我有一个带有左侧导航项目和右侧导航项目的 Bootstrap 3 导航栏（如下所示）。

When collapsed, I want both the navbar-toggle (AKA the 'hamburger menu') and its items to be left aligned.

折叠时，我希望导航栏切换（又名“汉堡菜单”）及其项目左对齐。

My code so far:

到目前为止我的代码：

<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>

The CSS to have the navbar-toggle on the left is:

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

I have added a "pull-right" style to have the items aligned, with no success.

我添加了“右拉”样式以使项目对齐，但没有成功。

The "navbar-right" works badly. In fact, with it, I will have both right-hand items on the same row. Using "pull-right" they work as single rows, but still stay on the right.

“导航栏右侧”效果不佳。事实上，有了它，我将在同一行上同时拥有两个右手边的项目。使用“拉右”，它们作为单行工作，但仍保持在右侧。

This leaves me with:

这给我留下了：

• The hamburger menu on the left (as desired),
• The navbar-left items on the left (as desired),
• The navbar right items are still on the right(I want this to be fixed!).

• 左侧的汉堡菜单（根据需要），
• 左侧的导航栏左侧项目（根据需要），
• 导航栏右侧的项目仍然在右侧（我希望修复此问题！）。

The final result:

最终结果：

The code snippet is here.

代码片段在这里。

采纳答案by Daniel Waghorn

I've made a few adjustments to your CSS and markup which you can view here.

我对您的 CSS 和标记进行了一些调整，您可以在此处查看。

One thing I'd point out is that pull-rightand the other pulland pushclasses are for rearranging grid columns.

我要指出的一件事是，pull-right另一个pull和push类用于重新排列网格列。

回答by Manoj Kumar

You can use the !importantrule to override the default behaviour of pull-right.

您可以使用该!important规则来覆盖 pull-right 的默认行为。

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

Output in <768px devices:

在 <768px 设备中输出：

Bootply

引导