我想将我的 Bootstrap 导航设置为在我想要的任何宽度下响应。例如,在 1200 像素宽度下,它应该像正常导航一样运行,但在 1110 像素宽度下;我想将菜单设置为响应式。我试着用 jquery 来实现,但没有回应。有办法吗?
最佳答案
您可以像这样使用 CSS 媒体查询来覆盖默认的 Bootstrap 导航栏切换阈值。
@media (max-width: 1110px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
演示:http://bootply.com/98488
(此示例使用 1280
,但您可以将其更改为 1110
以查看导航栏折叠)
关于css - 我怎样才能使 Bootstrap 菜单随时响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21181708/