ブートストラップの折りたたみナビゲーションボタンは、横向きではあるがポートレートモードでは機能しません。

Question

モバイルデバイス用に折りたたまれたブートストラップナビバーを作成しました。それはブラウザのサイズを縮小すると私のPC上で動作し、それはscreenflyで動作します。しかし、私が自分の電話（iPhone 6S）のサイトにアクセスすると、ボタンは電話機がランドスケープモードのときにのみ機能します。なぜこれが起こっているのか分かりません。なぜどんなアイデア？おかげ

デフォルトのブートストラップにより、ナビゲーションバー

<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 
<div class="container"> 
    <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> 
    <div class="collapse navbar-collapse" id="navbarDiv"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#about-us" >About</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#pricing" >Pricing</a> 
      </li> 
     </ul> 
    </div> 
</div> 
</nav> 

Answer 1

は、一般的には、ブートストラップバージョン、768pxに依存して一定の幅で崩壊します。

できることは、CSSクエリを追加することです。

@media (max-width: 990px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
} 

変更お使いの携帯電話のランドスケープモードの幅に応じmax-widthの値。それはうまくいくはずです。