モバイルデバイスでブートストラップnavbarが正しく動作しない

Question

初めてここに書きます。

モバイルデバイスのサイトにアクセスするときに、私のブートストラップnavに1つの問題があります。

私はナビゲーションがあり、「ギャラリー」のようなサブメニューとして「ピクチャ」と「ビデオ」をクリックしています。問題は、メニューをクリックすると、それはどのようにすべきかが分かりますが、「ギャラリー」をクリックすると「写真」と「ビデオ」が表示され始めますが、メニュー全体が折りたたまれたり閉じたりします。 「ピクチャ」や「ビデオ」をクリックすることさえできません。

私は「MENU」をクリックすると拡大します。「ギャラリー」をクリックすると拡大します。「ビデオ」をクリックしてビデオページに行きます。 現在の動作は次のようなものです：MENUをクリック - 拡大 - 「ギャラリー」をクリック - 全体のMENUが前後に畳まれます。

それが正常に動作してNAV（デスクトップ）のスクリーンショット - http://prntscr.com/fugrrv

それが正常に動作してNAV（モバイル）のスクリーンショット - 私は私のコードを投稿します

http://prntscr.com/fugs3jはあなたが問題を見つけるので、もしください。私に教えてください、私はこの "小さな事"のすべての神経を失った。 コードを少し混乱させています。私はすでに見つけた解決策を試しています...しかし成功はありません。悪い英語のため申し訳ありません

私は頭の中でリンクされjquery.min.js/CSS、bootstrap.min.js/CSSを持っているとフッター

..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="mainNav" class="navbar navbar-inverse navbar-fixed-top""> 
 
    <!-- navbar inverse - container fluid start --> 
 
    <div class="container-fluid"> 
 
     <!-- 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-collapse" aria-expanded="true"> 
 
       <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
 
      </button> 
 
      <a class="navbar-brand" href="/">OPG Dumančić</a><span class="navbar-brand" id="brand-bull">&bull;</span></a><span class="navbar-brand" id="page-title"><?php echo "$pagetitle"; ?></span> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="navbar-collapse collapse" id="navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="<?=(isset($menuid) && $menuid=='index')?'active':'';?>"> 
 
        <a href="/">Početna</a> 
 
       </li> 
 
       <li class="<?=(isset($menuid) && $menuid=='onama')?'active':'';?>"> 
 
        <a href="onama">O nama</a> 
 
       </li> 
 
       <li class="nav-dropdown nav-link"> 
 
        <a href="#" class="nav-link nav-dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Galerija &equiv;</a> 
 
        <ul class="navbar-inverse dropdown-menu nav-dropdown"> 
 
         <li class="<?=(isset($menuid) && $menuid=='galerija-slika')?'active':'';?>"><a id="aslike" href="galerija-slika">&rArr; Slike</a></li> 
 
         <li class="<?=(isset($menuid) && $menuid=='galerija-videa')?'active':'';?>"><a id="avideo" href="galerija-videa">&rArr; Video</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="<?=(isset($menuid) && $menuid=='kontact')?'active':'';?>"> 
 
        <a href="kontakt">Kontakt</a> 
 
       </li> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Answer 1

あなたコードには小さなエラーがいくつかあります。追加の引用符、追加の終了アンカー（</a>）、および省略された終了の順序付けられていないリスト。予想通りブートストラップ機能をもたらすように思えるこれらの問題を修正し、コードを実行している：

https://www.bootply.com/LnbYC1Ib1S

<nav id="mainNav" class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="true"> 
      <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
     </button> 
     <a class="navbar-brand" href="/">OPG Dumančić</a><span class="navbar-brand" id="brand-bull">&bull;</span><span class="navbar-brand" id="page-title"><?php echo "$pagetitle"; ?></span> 
    </div> 

    <div class="navbar-collapse collapse" id="navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="<?=(isset($menuid) && $menuid=='index')?'active':'';?>"><a href="/">Početna</a></li> 
     <li class="<?=(isset($menuid) && $menuid=='onama')?'active':'';?>"><a href="onama">O nama</a></li> 
     <li class="nav-dropdown nav-link"> 
      <a href="#" class="nav-link nav-dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Galerija &equiv;</a> 

      <ul class="navbar-inverse dropdown-menu nav-dropdown"> 
      <li class="<?=(isset($menuid) && $menuid=='galerija-slika')?'active':'';?>"><a id="aslike" href="galerija-slika">&rArr; Slike</a></li> 
      <li class="<?=(isset($menuid) && $menuid=='galerija-videa')?'active':'';?>"><a id="avideo" href="galerija-videa">&rArr; Video</a></li> 
      </ul> 
     </li> 
     <li class="<?=(isset($menuid) && $menuid=='kontact')?'active':'';?>"><a href="kontakt">Kontakt</a></li> 
     </ul> 
    </div> 
</div> 

Answer 2

私は（それはJSとは何かを持っているが、私はこの問題を回避するために管理していると仮定します今のところ）。

ID「navbar-collapse」のdivから「navbar-collapse」というクラスを上から削除しても、すべての機能がモバイルで正常に機能しますが、PC上のすべてのnavlink dissapers（ブランドのみが表示されます）だから私はメディアのクエリを使用して＃navbar-collapseをブロックとして表示し、「メニュー」ボタンに縮小する（表示しない：ブロックして、常にモバイルで開く）ようにしている。返信ありがとうRobert C！