html - 中心品牌和左右链接

Question

我想让品牌居中，链接到它的左边和右边。在下面的示例中，我希望 Brand 在元素和简历之间。 http://jsfiddle.net/DTcHh/1432/

HTML:

    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
<header class="site-header">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <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="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/blog">blog</a></li>
          <li><a href="/projects">projects</a></li>
          <li><a href="/resume">resume</a></li>
          <li><a href="/contact">contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

CSS:

@media (min-width: 768px){
    .navbar-nav{
        margin: 0 auto;
        display: table;
        table-layout: fixed;
        float:none;
    }
}

Answer 1

这听起来有点无聊，但如果您在元素 lip 之前将您的品牌放在 li 元素中>

<li><a href="/projects">projects</a></li>
<li><a class="navbar-brand" href="#">Brand</a></li>
<li><a href="/resume">resume</a></li>