我可以显式定义最小像素宽度引导应该切换到响应移动版本? [英] can I explicit define minimum pixel width on which bootstrap should switch to responsive mobile version?

查看:110
本文介绍了我可以显式定义最小像素宽度引导应该切换到响应移动版本?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用bootstrap响应和我做错了,或者bootstrap不是那么响应,因为我会喜欢它。



下面你看到4种可能的状态,我会避免在中间的两个。



QUESTION 我可以设置最小宽度在像这样的Bootstrap将总是在这种移动看起来像例4中所示的像素?



我使用twitter bootstrap版本3
这里是负责navbar 。具体看这个注释:


当视口
比@ grid-float-断点,当视口在宽度上至少为
@ grid-float-breakpoint时,扩展为
水平非移动视图。在Less
源中调整此变量以控制导航栏折叠/展开的时间。默认值
是768像素(最小的小或平板电脑屏幕)。


http://getbootstrap.com/customize/#grid-system 。在你的情况下,你可以将 @ grid-float-breakpoint:@ screen-sm-min 更改为 @ screen-md-min


I use bootstrap responsive and either I am doing something wrong, or bootstrap is not so responsive as I would love it to be.

Below you see 4 possible states, and I would avoid the two in middle. Either everything is inline like in first case, or force bootstrap to be "mobile" like in case 4.

QUESTION Can I set minimum width in pixels on which Bootstrap will always be in this mobile look like shown in case 4?

I am using twitter bootstrap version 3 here is code responsible for navbar https://gist.github.com/andilab/c1eba569dd0b9b9ad280

case 1: OK

case 2: BAD case 3: BAD case 4: OK

解决方案

Yep. Lots of ways to do it, but I think the easiest is to download a custom Bootstrap from http://getbootstrap.com/customize. Specifically see this note:

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

And make that change here: http://getbootstrap.com/customize/#grid-system. In your case, you would change @grid-float-breakpoint: @screen-sm-min to @screen-md-min.

这篇关于我可以显式定义最小像素宽度引导应该切换到响应移动版本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆