如何在bootstrap导航栏中将文本与link元素的底部对齐

Question

我想让我的所有文字的底部在我的导航栏中对齐。我正在使用bootstrap导航栏，所有文本都是对齐的，除了带有navbar-brand类的链接。我如何才能获得它，以便品牌和文本的其余部分在文本的底部对齐？

我看到了this的问题，并尝试将所有链接的位置设置为绝对值，以0为底，我将导航栏类的位置设置为相对，但这没有帮助。

这是html：

  <nav class="navbar navbar-fixed-top navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Brandname</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/create" class="test">Submit</a></li>
          <li><a href="/login">Login</a></li>
          <li><a href="/register">Register</a></li>
        </ul>
      </div>
    </div>
  </nav>

Here是一个小提琴，有我的榜样。

编辑： 如果您检查“提交”链接和“品牌名称”链接，则可以看到它们的高度均为20，文本的高度居中。因此，这必须意味着Brandname高度的底部（因为Brandname文本较大）低于Submit的文本。

编辑： 感谢@Pete使this用红线表示文本底部如何在品牌名称文本和其他文本之间不对齐。

编辑： 一种解决方案是使所有链接元素的字体大小相同，但我的要求是保持品牌名称的字体大小至少为18px，并使其他链接的字体大小为15px。