调整Bootstrap 3.1.1 Navbar的大小

Question

我有一个关于twitter bootstrap导航栏的快速问题。我正在尝试将导航栏的宽度更改为仅占用页面宽度的80％并以页面为中心。

我已经尝试将.navbar，.nav，.navbar-collapse的宽度设置为80％，所有这些都无所事事或者过多地缩小了导航栏。

链接到代码： http://pastebin.com/fHWJfYTL

感谢您的帮助。

Answer 1

试试这个：

.navbar {
    margin: auto;
    width: 80%;
}

Answer 2

以下是BS3中使用的选择器（媒体查询），如果您想保持一致：

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

从版本3.1.1开始，这仍然是准确的

Demo

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 */
}