Css 折叠时在单独的行上显示左侧和右侧导航栏链接

我有一个关于在导航栏上定位链接的问题。我希望左侧链接显示在折叠菜单的一行上，右侧链接显示在下一行上

现在我可以使用css中的“display:inline flex”将所有链接显示在同一行上，但我不知道如何将它们分开

以下是我当前的HTML和CSS：

<div class="container">
    <nav class="navbar navbar-inverse">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
    </div>

.navbar-right {
    float: right;
    margin-right: -15px;
}

.collapse > .navbar-left {
  display: inline-flex;
}

.collapse > .navbar-right {
  display: inline-flex;
}

.navbar .navbar-nav {
  float: none;
  vertical-align: top;
  text-align: center;
}

切换导航









.导航栏对吗{
浮动：对；
右边距：-15px；
}
.collapse>左侧导航栏{
显示：内联flex；
}
.collapse>.navbar right{
显示：内联flex；
}
.navbar.navbar导航{
浮动：无；
垂直对齐：顶部；
文本对齐：居中；
}

以及指向我的JSFIDLE的链接：

---

非常感谢您的帮助

因为有

浮动：左！重要的添加到
.navbar left
。要覆盖它，请使用以下css：

.nav.navbar-nav.navbar-left {
    float: none !important;
}

因为有
浮动：左！重要的添加到
.navbar left
。要覆盖它，请使用以下css：

.nav.navbar-nav.navbar-left {
    float: none !important;
}

使用媒体查询来包含规则，使其仅适用于768px下，并对
li
项使用内联块，并将导航栏导航宽度设置为100%，同时删除任何边距，使其实际居中

工作示例代码段


@介质（最大宽度：767px）{
.navbar.navbar-default.navbar导航{
宽度：100%；
文本对齐：居中；
保证金：0；
}
.navbar.navbar-default.navbar right>li，
.navbar.navbar-default.navbar left>li{
显示：内联块；
}
}

切换导航
















使用媒体查询包含规则，使其仅适用于768px下，并对
li
项使用内联块，并将导航栏导航宽度设置为100%，同时删除任何边距，使其实际居中

工作示例代码段


@介质（最大宽度：767px）{
.navbar.navbar-default.navbar导航{
宽度：100%；
文本对齐：居中；
保证金：0；
}
.navbar.navbar-default.navbar right>li，
.navbar.navbar-default.navbar left>li{
显示：内联块；
}
}

切换导航