1

Bootstrap レスポンシブ ナビゲーション バー/ヘッダーを機能させようとしています。しかし、モバイルサイズの画面でアイコンをクリックしてメニューを表示しても何も起こりません。

もう少しうまく説明するために、次のようなナビゲーション バーを作成したいと思います: http://getbootstrap.com/components/#navbar

そして、ここに私のコードがあります:

 <!-- HEADER/NAVBAR -->
 <nav class="navbar navbar-default" role="navigation">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand" href="#"><img src="Images\O3_square_mid.gif"></a>
   </div>

   <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Analysstatus</a>
        </li>
        <li>
          <a href="#">Aktiva kunder</a>
        </li>
      </ul>
    </nav>
  </nav>
  <!--HEADER/NAVBAR -->

私が使用している唯一のjavascriptは
src="bootstrap-3.0.0/dist/js/bootstrap.min.js"です

jqueryが必要かどうかはわかりませんが、jqueryの有無にかかわらず試してみましたが、まだ何も起こりません。

4

2 に答える 2

2

data-targetナビゲーションバーの折りたたみが間違っています。トグル ボタンを次のように変更します。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
</button>

ドキュメントはターゲットとして参照navbar-ex1-collapseしていますが、これはドキュメントにのみ関連しています。

デモ: http://bootply.com/90771

于 2013-10-29T17:08:42.903 に答える
1

回答として私のコメントを追加:
Rails またはプラグインと依存関係をロードする別のフレームワークを使用する場合、問題がプロジェクトの依存関係の解決にないことを確認してください。プラグインの依存関係にブートストラップを含めます。たとえば、Ruby では次のものをインストールします。

gem install twitter-bootstrap-rails

これにより、Bootstrap が期待どおりに動作することが保証されます。

于 2013-10-29T20:16:25.583 に答える