Bootstrap Horizontal NavBar Spannweite der Seite

Question

Wie kann ich eine horizontale Navigationsleiste erhalten, die 80% der Breite der Seite ausmacht?

ich meine navbar wie so hoch:

<div class="navbar navbar-default navbar-centered" role="navigation"> 
     <ul class="nav navbar-nav"> 
      <li><a class="navbar-button" role="button" href="#home">HOME</a></li> 
      <li><a class="navbar-button" role="button" href="#about">ABOUT</a></li> 
      <li><a class="navbar-button" role="button" href="#gallery">GALLERY</a></li> 
      <li><a class="navbar-button" role="button" href="#products">PRODUCTS</a></li> 
      <li><a class="navbar-button" role="button" href="#contact">CONTACT</a></li> 
     </ul> 
    </div> 

Es ist horizontal zentriert und die Elemente stapeln sich vertikal nach oben, wenn die Seite geändert wird.

Die Elemente sind jedoch alle in der Nähe der Mitte der Seite gruppiert und ich möchte, dass sie sich ausbreiten.

sieht mein CSS wie folgt aus:

.navbar-button { 
background-color: white; 
color: inherit; 
border: 3px solid blue; 
border-radius: 0px; 
} 

.navbar { 
    background-color: green; 
    border: 0px; 
    padding: 0px; 
} 

/*Center the navbar elements when collapsed*/ 
.navbar .navbar-collapse { 
    text-align: center; 
} 

@media (min-width: 768px) { 
    .navbar-centered .navbar-nav { 
     float: none; 
     text-align: center; 
    } 
    .navbar-centered .navbar-nav > li { 
     float: none; 
    } 
    .navbar-centered .nav > li { 
     display: inline; 
    } 
    .navbar-centered .nav > li > a { 
     display: inline-block; 
    } 
} 

Answer 1

diese Zeilen zu CSS hinzufügen:

@media(max-width:767px) { 
.navbar { 
    max-width:80%; 
    margin:auto; 
    /* float: left; or right as you want and then remove margin: auto*/ 
} 

} 
@media(min-width:768px) { 
    /* add here also if you want to have big menu 80% width */ 
} 
@media(min-width:992px) { 
    /* add here also if you want to have big menu 80% width */ 
} 
@media(min-width:1200px) { 
    /* add here also if you want to have big menu 80% width */ 
} 

DEMO