我可以明确定义引导程序应切换到响应式移动版本的最小像素宽度吗？

Question

我使用bootstrap响应，或者我做错了什么，或者bootstrap没有像我希望的那样响应。

下面你看到4种可能的状态，我会避免中间的两种状态。一切都像第一种情况一样内联，或强制引导为＆＃34;移动＆＃34;比如第4例。

问题我可以设置最小宽度（以像素为单位）Bootstrap将始终处于此移动设备外观中，如案例4中所示吗？

我正在使用twitter bootstrap第3版 这是负责导航栏https://gist.github.com/andilab/c1eba569dd0b9b9ad280

的代码

案例1：好的

案例2：坏 案例3：坏 案例4：好的

Answer 1

是的。有很多方法可以做到，但我认为最简单的方法是从http://getbootstrap.com/customize下载自定义Bootstrap。具体见本说明：

  

视口时，导航栏会折叠到垂直移​​动视图中   比@ grid-float-breakpoint更窄，并扩展到它的   至少在视口时的水平非移动视图   @ grid-float-breakpoint的宽度。在Less中调整此变量   用于控制导航栏折叠/展开时的源。默认值   是768px（最小的＆＃34;小＆＃34;或＆＃34;平板电脑＆＃34;屏幕）。

在此处进行更改：http://getbootstrap.com/customize/#grid-system。在您的情况下，您可以将@grid-float-breakpoint: @screen-sm-min更改为@screen-md-min。

Answer 2

bootstrap.css文件包含@Media个规则，用于定义它移动到移动布局的min-width。

您不应该直接编辑bootstrap.css文件，但可以覆盖自定义CSS文件中的min-width。

Answer 3

完整且有效的解决方案应该集中在导航栏菜单应折叠到的分辨率上：。

http://www.bootply.com/98488

的工作演示@Skelly

答案可以在这里找到： Twitter Bootstrap 3 navbar-collapse - set width to collapse

Answer 4

这可能有所帮助。

http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

您可以使用自适应实用程序类。

例如，在您的标题容器中，您可以添加hidden-xs hidden-md hidden-sm，在大多数手机和平板电脑上，您的菜单就像您的情况一样。

希望这就是你要找的东西。