我正在使用Twitter Bootstrap响应使用Brightcove App Cloud构建的移动应用程序。当菜单在窄设备上折叠时,菜单选择后最终将无法折叠。菜单下方的内容将更改,但菜单不会崩溃。我试图将它隔离到一个HTML页面或菜单项位置,但看不到模式。
以下是我的文件中的相关代码(对于六个页面,在某些特定CSS之外基本相同):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="bc-manifest" content="manifest.json" />
<title>Zencoder</title>
<link rel="stylesheet" type="text/css" href="http://files.brightcove.com/proxima-nova/font-faces.css">
<link href="stylesheets/brightcove-app-cloud-1.12.min.css" rel="stylesheet"/>
<link href="stylesheets/bootstrap.css" rel="stylesheet">
<link href="stylesheets/bootstrap-responsive.css" rel="stylesheet">
<link href="stylesheets/allPagesStyles.css" rel="stylesheet">
<link href="stylesheets/zencoder.css" rel="stylesheet">
</head>
<body>
<section id="pageone" class="page">
<header class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav maintop app-navigation">
<li id="mainNavTargetS"><a class="ss-nav">System Status</a></li>
<li id="mainNavTargetBC"><a class="bc-nav">Brightcove</a></li>
<li id="mainNavTargetVC"><a class="vc-nav">Video Cloud</a></li>
<li id="mainNavTargetAC"><a class="ac-nav">App Cloud</a></li>
<li class="active" id="mainNavTargetZC"><a class="zc-nav">Zencoder</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</header>
感谢您帮助解决此问题(至少对我而言)。
-Matt
答案 0 :(得分:0)
试试这个。它会让你知道你哪里错了。你还需要jQuery和bootbootstrap js。
答案 1 :(得分:0)
我最初使用了列出的教程中的代码。这是我的问题。请注意,在教程中,折叠菜单的菜单显示按钮如下所示。
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
如果您检查实际的Twitter Bootstrap代码,它显示如下(使用按钮,而不是锚点)
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
当我第一次开始编写代码时,没有任何区别,但随着我开始改变样式问题开始出现。一旦我匹配原始的Bootstrap代码,这些问题就消失了。
答案 2 :(得分:0)
检查以确保您没有任何其他javascript正在寻找.collapse或任何其他调用崩溃功能的JavaScript。
我之前的代码使用的是自定义折叠函数,我猜这与Bootstrap冲突。