Question

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

现在我可以使用＆＃34; display：inline-flex＆＃34;显示同一行显示的所有链接。在我的CSS中，但我不知道如何分开它们。

这是我当前的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：{{3}}

非常感谢任何帮助！

Answer 1

使用媒体查询来包含规则，以便它们仅在768px下应用并对li项使用内联块，并将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>

Answer 2

因为float: left !important;已添加.navbar-left。要覆盖它，请使用以下css：

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

<强> Fiddle

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

2 个答案: