Bootstrap 3导航栏右侧没有折叠在平板电脑宽度?

时间:2014-07-25 09:51:13

标签: twitter-bootstrap-3

我有一个基本的Bootstrap 3导航栏,带有导航栏 - 右下拉列表但是当我将它从大型桌面缩小到平板电脑时,而不是折叠它会跳到主菜单下面? http://www.doorsets.org.uk/apollodoors/index.html

我猜这与在媒体查询部分进行更改有关,但我不确定我需要更改什么。有人可以帮忙吗?

非常感谢 NJ

3 个答案:

答案 0 :(得分:1)

来自bootstrap关于此主题的文档:

  

更改折叠的移动导航栏断点

     

当视口比视口窄时,导航栏会折叠到垂直移​​动视图中   @ grid-float-breakpoint,当视口的宽度至少为@ grid-float-breakpoint时,展开为水平非移动视图。在Less source中调整此变量以控制导航栏折叠/展开的时间。默认值为768px(最小的“小”或“平板电脑”屏幕)。

请参阅http://getbootstrap.com/components/#navbar

因此,如果您希望导航栏在较大的屏幕上折叠,则需要将@ grid-float-breakpoint的值更改为适合您的值,可能是900px,或者更少@ screen-md-min。

答案 1 :(得分:0)

@NicoFerma是正确的,如果配置新的boostrap安装,“grid-float-breakpoint”是要更改的变量。但是,如果您不想安装新版本的bootstap,那么boostrap.min.css / boostrap.css文件中的这个简单的查找/替换对我来说很有用:

查找

@media(min-width:768px

替换为

@media(min-width:922px

*将最小宽度px修改为首选导航栏swithchpoint

答案 2 :(得分:0)

sed 's#.*#/^&|/p#' file1 | sed -f - -n file2