Html 引导navbar品牌定心

我想将

导航栏中的
品牌
名称集中在一组链接之间（即，左侧两个链接，右侧两个链接）。

问题是，我还想为
导航栏
被
折叠
时创建一个菜单，并将其设置为这样，
品牌
就不会出现在
下拉列表中

更新

请在

希望对你有帮助

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>

.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;
  }
}