1

我有一个 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 生成的。我的目标是把它带到这个 在此处输入图像描述

4

1 回答 1

1

默认情况下，grid-float-breakpoint（在 variables.less 中定义）设置为 768px。这意味着显示宽度为>=768px的所有屏幕的“桌面”（折叠）版本。正如您提到的，您的测试屏幕将在此范围内。因此，在 variables.less 中将 @grid-float-breakpoint 更改为 768px 以下，然后重新编译引导程序（或使用定制器来执行此操作）。

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

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

于 2013-11-11T20:14:31.547 回答