bootstrap navbar brand centering

Question

Ich möchte den brand Namen innerhalb der navbar zwischen einer Reihe von Links (d. H. 2 Links, um es links und 2 rechts ist es) zu zentrieren.
Die Sache ist, dass ich auch ein Menü für, wenn die navbar ist collapse ed machen und machen es so, dass die brand erscheint NICHT in der dropdown list.

https://jsfiddle.net/u471wydy/

Answer 1

AKTUALISIERT

Bitte beachten Sie meine Lösung bei CODEPEN

Hoffe, dass es Ihnen hilft.

HTML:

<div class="container"> 
    <nav class="navbar navbar-inverse" role="navigation"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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> 
    <a class="navbar-brand navbar-nav" href="{% url 'chat:index' %}">Chaty</a> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul>   
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 

    </nav> 
</div> 

CSS:

.navbar { 
    border-radius: 0px; 
} 

.navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 

.navbar-toggle { 
    z-index: 3; 
} 
ul.nav.navbar-nav { 
    margin: 0; 
} 
@media (min-width: 768px) { 
    .navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
    } 
    .navbar .navbar-collapse { 
    text-align: center; 
    } 
ul.nav.navbar-nav { 
    margin-left: 30px; 
    margin-right: 30px; 
    } 
}