如何使用引导程序将徽标居中并在导航栏上左右放置链接？

Question

I am creating a navbar with bootstrap. I want the logo to be in the center and the 4 links left and right of the logo. This is how I far I got, but it breaks when the navbar tries to collapse. Please help me out with the collapsing-part.

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div id="container">
            <div id="navbar-header pull left">
                <a id="brand" class="navbar-brand">JG</a>
            </div>
            <div class="navbar-header pull-right">
                <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul id="listleft" class="nav navbar-nav navbar-left">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
                <ul id="listright" class="nav navbar-nav navbar-left">
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#blog">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS:

.navbar-brand{
    position: absolute;
    width:100%;
    left:0;
    top:0;
    text-align: center;
    margin: auto;
    float:none;
}
#listright{
    float:right !important;
}
#listleft{
    float:left !important;
}

Answer 1

This works with bootstrap 3.2

HTML

    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand navbar-brand-centered">Brand</div>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-brand-centered">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><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>
            <li><a href="#">Link</a></li>               
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

CSS

@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
        background-color: #eee;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }
}

Disclaimer: This is not my solution, found here , but in case it disappears. :)