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