Html 引导菜单上方的导航栏品牌，直到调整大小并折叠到

我一直在寻找这样的例子，但什么也找不到。我使用常规文本作为我的导航栏品牌（没有图像），但是字体是200-300%，占用了很多空间。我想把名字放在菜单上面。但是，当窗口调整大小时，我需要将其折叠到导航栏的中心（当链接折叠时）

应该是这样的：

                             WEBSITE NAME
         link     link1    link2      link3   link4     link5

崩溃成

                             WEBSITE NAME                ==

所以，现在我用的就是这个。文本居中，两侧有链接，但由于尺寸不切实际，链接会溢出到navbar品牌后面

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
    <a class="navbar-brand" href="#">BIG WEBSITE TITLE</a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-left">
        <li id="nav">LINK for: </li>
        <li id="nav"><a href="#"><i class="fa fa-mars" aria-hidden="true"></i> LINK</a></li>
        <li id="nav"><a href="#"><i class="fa fa-venus" aria-hidden="true"></i> LINK</a></li>
        <li id="nav"><a href="#">LINK</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
    </ul>
  </div>
</nav>

---

这对我来说根本不起作用。

所以我在css中添加了这段代码

.navbar {
  height:100px;
}

.nav.navbar-left{
  bottom: 0;
  left: 0;
  position:absolute;
}

.nav.navbar-right{
  bottom: 0;
  right: 0;
  position:absolute;
}

为此目的：

这是你想要的吗？如果没有，我道歉

这应该可以

@介质（最小宽度：768px）{
.navbar-nav.navbar-center、.navbar标题中心{
左边距：50%；
转化：translateX（-50%）；
}
}

关于链接的名称及其表示结构，如果名称匹配（代码中没有“link5”）@BrandonBradley我可以稍后尝试澄清，但是每个链接都是非常随意的，我只是调用了一些链接，视觉中的链接是递增的。在我上面的代码中，navbar品牌仍然在navbar中。所以，这真的没有任何作用。当链接非常小时，这是有效的，但是当更多链接进入第二列时，会产生很多溢出效应。

.navbar {
  height:100px;
}

.nav.navbar-left{
  bottom: 0;
  left: 0;
  position:absolute;
}

.nav.navbar-right{
  bottom: 0;
  right: 0;
  position:absolute;
}