调整 Bootstrap 3.1.1 导航栏的大小答案

【问题标题】：Resizing Bootstrap 3.1.1 Navbar调整 Bootstrap 3.1.1 导航栏的大小
【发布时间】：2014-04-23 15:12:33
【问题描述】：

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

我尝试将 .navbar、.nav、.navbar-collapse 的宽度设置为 80%，要么什么都不做，要么将导航栏缩小太多。

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

感谢您的帮助。

【问题讨论】：

您希望它的宽度为 80% 并居中？
是的，页面宽度的 80% 并居中。抱歉，我的问题没有更具体，我将对其进行编辑。

标签： html css twitter-bootstrap

【解决方案1】：

如果您想保持一致，这里是 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 */
}

【讨论】：

这行得通，谢谢。我确信其他解决方案也同样有效，因此感谢其他回答的人。

【解决方案2】：

试试这个：

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

【讨论】：