css - 折叠时在不同的行上显示左右导航栏链接

Question

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

现在我可以在我的 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;
}

还有一个指向我的 jsFiddle 的链接:https://jsfiddle.net/wdeg6rko/

非常感谢任何帮助!

Answer 1

使用媒体查询来包含规则，以便它们仅在 768px 以下应用，并对 li 元素使用内联 block ，并将 navbar-navs 宽度设置为 100%，同时删除任何边距，以便它们实际上居中。

工作示例片段。

@media (max-width: 767px) {
  .navbar.navbar-default .navbar-nav {
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .navbar.navbar-default .navbar-right > li,
  .navbar.navbar-default .navbar-left > li {
    display: inline-block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <nav class="navbar navbar-default">
    <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>
        <li><a href="#">Link 3</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>
    </div>
  </nav>
</div>