0

BrightcoveAppCloudを使用して構築されたモバイルアプリに対応するTwitterBootstrapを使用しています。狭いデバイスでメニューが折りたたまれると、メニューを選択した後、最終的には折りたたまれません。メニューの下の内容は変更されますが、メニューは折りたたまれません。1つのHTMLページまたはメニュー項目の位置に分離しようとしましたが、パターンが表示されません。

これが私のファイルからの適切なコードです（特定のCSSを除いて、基本的に6ページで同じです）：

  <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>

この（少なくとも私にとっては）厄介な問題を手伝ってくれてありがとう。

-マット

4

3 に答える 3

0

これを試して。それはあなたが間違っている場所のアイデアをあなたに与えるでしょう。また、jQueryとbootbootstrapjsが必要です。

http://webdesigntutsplus.s3.amazonaws.com/tuts/319_bootstrap_pills_tabs/Tabs-Pills-BEGIN/navbar-examples.html

于 2013-02-23T11:48:40.223 に答える
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>

実際のTwitterBootstrapコードを確認すると、次のように表示されます（アンカーではなくボタン付き）

  <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コードと一致すると解消されました。

于 2013-03-18T17:46:44.150 に答える
0

.collapseを探している他のJavaScriptや、折りたたみ関数を呼び出す他のJavaScriptがないことを確認してください。

Bootstrapと競合していると思われるカスタム折りたたみ関数を使用した以前のコードがありました。

于 2013-06-13T16:22:39.837 に答える