Custom Theme Bootstrap

时间:2016-01-05 作者:Stephen

因此,我使用Bootstrap制作了我的自定义主题,一切都很好,当我把它放到平板设备上时,一切都很好。我遇到的问题是,当菜单和徽标位于同一行时,导航栏不会折叠。

请参见下图:http://prntscr.com/9mewuw

问题是它在移动设备上完全崩溃,而不是在iPad这样的平板设备上。我想知道这和什么有关系。

1 个回复
最合适的回答,由SO网友:Kieran McClung 整理而成

如果引导程序版本较少(未编译),则需要更改@grid-float-breakpoint 变量为992px,以使导航栏在“Tablet”(中)断点上折叠。资料来源:

Changing the collapsed mobile navbar breakpoint

当视口的宽度小于@栅格浮动断点时,导航栏将折叠为其垂直移动视图;当视口的宽度至少为@栅格浮动断点时,导航栏将扩展为其水平非移动视图。在更少的源中调整此变量,以控制导航栏何时折叠/展开。默认值为768px(最小的“小”或“平板”屏幕)。

如果没有,并且您只对引导进行了几处更改,那么最好通过customiser再次下载:http://getbootstrap.com/customize/

访问页面,搜索@grid-float-breakpoint大约在页面的一半处)并将值更改为@screen-md-min (请参见屏幕截图)。这将为您解决问题。

enter image description here


如果您不想重新编译引导,唯一的其他方法是创建一个覆盖介质查询,并将原始介质查询(768px)下的所有导航栏引用复制到其中。然而,这并不是一个理想的解决方案,可以确保您获得所有值得寻找的东西bootstrap/less/navbar.less github上的文件(https://github.com/twbs/bootstrap/blob/master/less/navbar.less) 查找的任何实例@media (min-width: @grid-float-breakpoint) { ... } 这就是您需要替换的代码。

@media (min-width: 992px) {
    //All min-width: 768px navbar code
}

相关推荐

如何创建4列和2列Twitter-Bootstrap相结合的WordPress循环?

我想根据4列(桌面视图)、2列(mobile view 768px)和1列(mobile view 425px)的组合显示帖子。我在下面找到了很棒的代码:<?php $paged = ( get_query_var(\'paged\') ) ? get_query_var(\'paged\') : 1; $args=array( \'post_type\' => \'post\',