logo标签列表

Bootstrap 3 导航栏折叠

twitter-bootstraptwitter-bootstrap-3navbar
212
为什么它们不适用？ - PW Kad
我觉得代码本身已经被改变了很多。 - timhc22
我不太明白。你指的是CSS代码吗？类应该基本相同，只需要进行一些小的调整。 - PW Kad
别担心，我觉得我有点混淆了，可能是因为定制化下载的原因（我发布的其中一个答案指定了要编辑的特定行号）。 - timhc22
如果我们可以在未来内联定义它，例如<nav data-sm-collapse="800px"...，那就太好了，因为在构建之前我不知道需要多宽。 - rybo111
显示剩余2条评论
12个回答
0

我认为我找到了一个简单的解决方案来通过 CSS 更改折叠断点。

我希望其他人可以确认，因为我没有彻底测试它，也不确定这个解决方案是否有副作用。

您必须更改以下类定义的媒体查询值：

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

这是我在当前项目上的解决方案，但我仍然需要更改一些 CSS 定义，以便为所有屏幕尺寸正确排列菜单。

希望对你有所帮助。

0

对于那些想要在小于标准768px的宽度上折叠（在小于768px的宽度上展开）的人，需要以下CSS：

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接