web-dev-qa-db-ja.com

トグルボタンの折りたたみが機能しないBootstrap navbar

ナビゲーションバーが折りたたまれているとき、トグルボタンが機能しません。データターゲットを数回確認しましたが、問題ありません。

これが私のコードです：

<div class="navbar navbar-fixed-top navbar-inverse">
 <div class="container">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>


    <div class="collapse navbar-collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>

誰かが問題が何であるか、そして私がそれをどのように修正できるか知っていますか？

twitter-bootstraptogglenavbarcollapse
6
James Howley

もちろん、トグルボタンは画面の解像度によって異なります。次のように試してください。

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


     </head>
<body >

<nav class="navbar navbar-inverse">
<div class="container-fluid">

 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>
</div>

    <div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>
    </div>
    </nav>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>
</html>

あなたの携帯電話でこれを試してみてください。その後、CSSファイルに移動し、トグルボタンが表示されたときに画面サイズのプロパティを設定します。これらのプロパティを変更するか、ブラウザウィンドウのサイズを変更してからトグルボタンが表示されるまで、トグルボタンをデスクトップに表示しない場合があります。

例えば。ブラウザウィンドウで最大化すると、トグルボタンが表示されません。 Toggle bar not shown ただし、ブラウザウィンドウのサイズを半分に変更した場合（または電話でサーフィンしている場合）は、次のようになります。 When on mobile or a reduced browser size

これを修正するには、CSS設定に移動する必要があります。しかし、これはあなたがそれを変更したい場合のみです。それ以外の場合は正常に動作します。

5
Prasanth Louis

ライブラリが正しくインポートされていることを確認してください。同じ問題が発生しました。Jqueryの異なるバージョンで奇妙な動作をすることがあるのはなぜですか。

これを試して

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
3
Miomir Dancevic

「navbar-toggleボタンが機能しないのはなぜですか」というこの問題に直面するたびに、今回は解決策を見つけました。特に、Google chrome開発チームがエラーを明確に表示してくれたことに感謝します。

bootstrap javascriptファイルの前にjqueryライブラリファイルを含める必要があります。

1
Vijay

デフォルトのナビゲーションバー-JavaScriptプラグインが必要

JavaScriptが無効で、ビューポートが狭いためナビゲーションバーが折りたたまれている場合、ナビゲーションバーを展開して.navbar-collapse内のコンテンツを表示することはできません。

レスポンシブなナビゲーションバーを使用するには、お使いのバージョンのBootstrapに折りたたみプラグインを含める必要があります

1
user4986178

私が同じ問題を抱えていてこれで修正したので、それが役に立てば幸いです：

<body>

     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
         ...
     </nav>

     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>

</body>
1
Anna Chen