Question

我想将brand名称置于navbar内的一串链接之间（即2个链接指向左侧，2个链接指向右侧）。
问题是，我还希望在navbar collapse编辑时制作一个菜单，并使其成为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;
  }
}

bootstrap navbar品牌中心

1 个答案: