Bootstrap Horizo​​ntal NavBar页面宽度

Question

如何让水平导航栏跨越页面宽度的80％？

我设置了我的导航栏：

<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>

它是水平居中的，当页面调整大小时，元素会垂直叠加。

但是，这些元素都聚集在页面中心附近，我希望它们能够展开。

我的CSS看起来像这样：

.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

将此行添加到CSS：

@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