2017-10-01 22 views
0

私は、ブートストラップ4を使用しているアプリで作業しています。現時点では、デスクトップと携帯電話でこのアプリを対象にしています。ブートストラップ4 - ハンバーガーメニューがモバイルで表示されない

<nav class="navbar navbar-dark bg-dark"> 
    <div class="container"> 
    <a class="navbar-brand" href="/">Some Really Long Title Goes Here</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button>   

    <div id="navbarCollapse"> 
     <ul class="navbar-nav mr-auto"></ul> 
     <ul class="navbar-nav"> 
     <li class="nav-item"><a class="btn btn-outline-warning" href="#" target="_blank">Action Button</a></li> 
     </ul> 
    </div>     
    </div> 
</nav> 

<div class="container"> 
    <p>Here are the details of the page</p> 
</div> 

Foは:私は、私は次のコードで、Bootply here持っ

+-----------------------+ 
| This is|   [=] | 
+--------|    | 
|  |  [button] | 
|  |    | 
|  |    | 
|  |    | 
|  |    | 
|  |    | 
|  |    | 
+--------+--------------+ 

​​

モバイル

デスクトップをしたいです何らかの理由でハンバーガーメニューがフルスクリーンモードで表示されます。私は欲しくない。同時に、ハンバーガーメニューを選択すると、オプションは表示されません。私は間違って何をしていますか?

答えて

0

これで問題が解決するはずです。

<nav class="navbar navbar-expand-md navbar-dark bg-dark"> 
    <div class="container"> 
    <a class="navbar-brand" href="/">Some Really Long Title Goes Here</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button>   

    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="navbar-nav mr-auto"></ul> 
     <ul class="navbar-nav"> 
     <li class="nav-item"><a class="btn btn-outline-warning" href="#" target="_blank">Action Button</a></li> 
     </ul> 
    </div>     
    </div> 
</nav> 

<div class="container"> 
    <p>Here are the details of the page</p> 
</div> 

コードはNAV要素と領域、ドロップダウンで「崩壊ナビゲーションバー崩壊」にナビゲーションバーエキスパンド-MDを欠落させました。

これが役に立ちます。

関連する問題