在Bootstrap 3导航栏中，无法将品牌移动到它自己的导航栏上方

我觉得这应该是一个简单的任务，但我还没有找到一个解决方案，甚至任何人似乎都有同样的问题。我基本上只是想把品牌放在主导航栏上方的单独一行上，同时留在导航栏内(或者至少看起来像这样)。

我试图通过清除来实现这一点(对于导航栏品牌和/或导航栏导航类)，在导航栏内移动品牌，完全删除它并将其放在HTML导航栏之前(也用普通的h1元素替换它，因为我认为类实际上只意味着在导航栏内使用)…

我所做的一切要么没有明显的变化，要么以某种方式抛出对齐。我已经设法摆脱了导航栏的行高，这样导航链接的背景就不会一直到达顶部，向左或向右移动导航栏的内容，等等。

我有这个:

品牌菜单项|菜单项|菜单项|菜单项

我想要这个:

<标题> 品牌

菜单项|菜单项|菜单项|菜单项

现在，我的代码与你直接得到的代码非常接近:

<nav class="navbar navbar-default navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
      <a class="navbar-brand" href="#">Title</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav-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>
        <div class="collapse navbar-collapse" id="top-nav-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

同样，我对CSS做了很少的改动(改变显示没有明显的效果):

.navbar-brand {
  font-size: 40px;
  display: block;
}

希望这支笔能更有帮助。

老实说，我觉得我一定错过了一些非常明显的东西，但我看到的大多数相关帖子都有相反的问题，通常是太多的链接断开到两行，而人们只想要一条。我真的很感激你的帮助。谢谢!

.navbar-nav {
    clear: left;
}