Bootstrap 3 - 显示所有屏幕尺寸的折叠导航

我正在使用Bootstrap v3。Bootstrap 3 - 显示所有屏幕尺寸的折叠导航

我使用了navbar类，这样当我有我的屏幕移动大小导航崩溃和小网格状切换按钮显示 - 所以这是按预期工作。

我想要的是，这是所有屏幕尺寸的默认操作。也就是说，即使在桌面上，我也希望导航功能可以折叠并且切换按钮可见。

我已经看过了CSS，并有一大堆东西提供了功能，但我不知道要更改哪些部分。

我试过评论大型媒体查询，虽然有很多，它似乎有其他造型的连锁效应。

有什么想法？

来源

2014-02-18 Darren

你能发布一个链接到网站吗？ – GSaunders

不，对不起，内部网站。虽然如果你看到标准的bootstrap导航栏 - 这就是使用什么。只需要有导航栏折叠为所有媒体尺寸 – Darren

这可能会有所帮助：http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse – moodyjive

您可以使用覆盖缺省引导CSS像这样...

.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://www.bootply.com/114896

这将确保在倒塌的导航栏将始终使用重写引导@media查询。

更新：对于引导4，你只需要删除navbar-toggleable类： http://www.codeply.com/go/LN6szcJO53

来源

2014-02-18 21:29:44 ZimSystem

谢谢 - 这对我来说。我在导航的底部看到一个奇怪的厚灰色条，但它的动画效果非常好，但我确信我可以确定这一部分。 – Darren

+19

这适用于bootstrap 3.0.3。在移至3.3.2之后，需要将其添加到css中：.navbar-collapse.collapse.in {display：block！important; }。否则，当扩大时，它会崩溃。 – puddleglum

@puddleglum你在哪里使用该CSS？你需要显示：none最初隐藏.navbar-collapse.collapse – Rich

这是对我工作。

访问：http://getbootstrap.com/customize/

定位： '少变量' - > '媒体查询断点'

变化：@屏幕LG值从1200像素到1920px

找到： “网格系统” - > @网格浮子断点

更改：@屏幕-SM-min到@屏幕-LG

滚动到结束页。

点击“编译并下载”

提取和使用这些下载的文件。

来源

2014-06-20 12:07:26 TheAllSeeingI

+1这样一个很好的解决方案 –

这个修复有点疯狂。 –

这为我工作：

.navbar-collapse.collapse { 
    display: none!important; 
}

如果假设你找到切换的问题也是如此，然后把以下内容：

.navbar-collapse.collapse.in{ 
    display: block!important; 
}

来源

2015-07-08 11:00:16 user5093523

上@grid-float-breakpoint（网格系统增加值100％ - >@grid-float-breakpoint - >100%而不是@screen-sm-min）。

来源

2015-07-29 12:00:00

可能要添加一些解释 – Huey

我发现最简单的方法是改变变量。文件和变化少

// Navbar collapse 
//** Point at which the navbar becomes uncollapsed. 
@grid-float-breakpoint:  @screen-sm-min;

到

// Navbar collapse 
//** Point at which the navbar becomes uncollapsed. 
@grid-float-breakpoint:  (your break point);

只有当你使用较少的OFC。

来源

2016-01-15 11:54:11 wilcocammeraat

当网格浮点断点处于100％时，它从不崩溃。这与他们想要的相反。 –

很抱歉改变了断点选择器 – wilcocammeraat

想要节省时间，但它并不完美。我遇到了一些最新的bootstrap问题，有一些不必要的代码，并且在下拉菜单中有overflow问题。此代码对我来说是最好的解决方案：

.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-collapse.collapse.in { 
    display: block!important; 
} 
.navbar-nav { 
    float: none!important; 
} 
.navbar-nav>li { 
    float: none; 
}

来源

2016-11-02 09:22:48

Bootstrap 3 - 显示所有屏幕尺寸的折叠导航

回答

相关问题