Question

我有一个PhoneGap应用程序，我使用Bootstarp进行布局和样式设置。问题是当我在Nexus 4模拟器上运行应用程序（分辨率768x1280）时，Bootstrap将其视为桌面并将小导航栏显示为标题，而不是右侧的下拉菜单。我的index.html标题如下：

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

这主要是PhoneGap生成的内容。我的目标是把它带到这个 enter image description here

Answer 1

默认情况下，grid-float-breakpoint（在variables.less中定义）设置为768px。这意味着显示宽度为＆gt; = 768px 的所有屏幕的“桌面”（折叠）版本。正如您所提到的，您的测试屏幕将在此范围内。因此，在variables.less中重新将@ grid-float-breakpoint更改为低于768px的值并重新编译bootstrap（或使用customizer执行此操作）。

另请阅读http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/以查看@ grid-float-breakpoint不会影响所有设置。

要将下拉菜单更改为其移动版本，另请参阅https://stackoverflow.com/a/18944192/1596547

Twitter Bootstrap导航栏下拉菜单无效

1 个答案: