7
我使用Twitter Bootsrap 3 navbar-collapse
:http://bootply.com/91119Twitter的引导3导航栏崩溃 - 设置宽度崩溃
如果减少了页面的宽度,菜单分成两行,并随后崩溃。 我没有分成两行,但想要崩溃。 我该怎么办?
我使用Twitter Bootsrap 3 navbar-collapse
:http://bootply.com/91119Twitter的引导3导航栏崩溃 - 设置宽度崩溃
如果减少了页面的宽度,菜单分成两行,并随后崩溃。 我没有分成两行,但想要崩溃。 我该怎么办?
可以减少在该导航栏崩溃的地步..
选项1
从引导文档(http://getbootstrap.com/components/#navbar)
根据不同的内容在你的导航栏,你可能需要更改导航栏在折叠和水平模式之间切换的点。自定义@ grid-float-breakpoint变量或添加自己的媒体查询。
选项2
如果你不想自定义引导版本,您可以使用CSS媒体查询。例如,下面是设置断点1280个像素:在3.1导航栏已经改变
@media (max-width: 1280px) {
.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;
}
}
更新引导3.1
,所以覆盖断点的CSS比不同3.0。这将防止从导航栏显示,然后在3.1 http://www.bootply.com/120604
感谢斯凯利突然崩溃,这让我太:) – Alyas
在3.1,选项1定制'@网浮法breakpoint'仍然可以工作的,作为少仍然使用这个变量来产生更新的CSS。我最喜欢修改变量的方法是在我的项目中使用源代码Less,并在导入bootstrap.less的新LESS文件中分别覆盖变量 - 这样,您可以升级到较新版本的Bootstrap而不会丢失任何自定义设置。 –