引导导航栏品牌居中

Question

我想将brand 名称置于navbar 中的一组链接之间（即左侧的2 个链接和右侧的2 个链接）。
问题是我还想为navbar 为collapseed 时创建一个菜单，并使其像brand 不会出现在dropdown list 中。

https://jsfiddle.net/u471wydy/

Answer 1

更新

请通过 CODEPEN

查看我的解决方案

希望对你有帮助。

HTML：

<div class="container">
  <nav class="navbar navbar-inverse" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

    </div>
    <a class="navbar-brand navbar-nav" href="{% url 'chat:index' %}">Chaty</a>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>          
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>

  </nav>
</div>

CSS：

.navbar {
  border-radius: 0px;
}

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
}

.navbar-toggle {
  z-index: 3;
}
ul.nav.navbar-nav {
  margin: 0;
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
 ul.nav.navbar-nav {
    margin-left: 30px;
    margin-right: 30px;
  }
}