3

更新 これは既知の問題であることが判明しました。スタック オーバーフローの検索で出てこないだけです。この投稿が問題にスポットライトを当てることを願っています。

基本的に、2.2.1 の時点での Twitter Bootstrap には、モバイルで正しく動作するタブ ドロップダウン機能にまだ問題があります。

実際、特定の Android および iOS バージョンで表示すると、上記のリンクにある独自のドキュメントでさえ正しく機能しません。デバイスでテストするには、ここにあるドロップダウンを使用してみてください: http://twitter.github.com/bootstrap/javascript.html#tabs

この問題の解決策と進捗状況については、Twitter Bootstrap Github リポジトリ ( https://github.com/twitter/bootstrap/issues/4550 ) を参照してください。

/////////////////////////////////////////////// ////////////////////

標準ドキュメントで Twitter Bootstrap 2.2.1 ボイラープレート ファイル (css、js) を使用すると、モバイルで動作するドロップダウン タブを取得できません (ブラウザと Chrome の両方で Android 4.1 でテスト済み)。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">    
    <script src="./js/jquery-1.8.2.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
    $('#myTab a').click(function (e) {e.preventDefault();
  $(this).tab('show');
})
</script>
  </head>
<body>
<div class="row">
  <div class="span12">
     <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#profile" data-toggle="tab">Profile</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b     class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
                  <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
                </ul>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="home">
                <p>Raw</p>
              </div>
              <div class="tab-pane fade" id="profile">
                <p>Food</p>
              </div>
              <div class="tab-pane fade" id="dropdown1">
                <p>Etsy</p>
              </div>
              <div class="tab-pane fade" id="dropdown2">
                <p>Trust</p>
              </div>
            </div>
          </div>
        </div>
   </body>
</html>

何か案は？

4

2 に答える 2

3

この問題はBootstrap2.2.2で修正されています

https://github.com/twbs/bootstrap/wiki/Changelog

于 2012-12-14T12:27:51.423 に答える
0

@fatオプションとドロップダウンについて話している場合は@mdo、デザインを変更する必要があります.モバイルで動作させたとしても、ユーザーにとって快適なエクスペリエンスにはなりません..

このリンクは、モバイル用にしようとしているデザインを再考するのに役立つかもしれません..

代わりに、ドロップダウンなしでより多くのタブを組み込むか、ボタンまたはリンクを使用することができます。

于 2012-11-16T07:33:36.053 に答える