Bootstrap4メディアクエリは、直接でも私は私の新しいプロジェクトのブートストラップ4を使用していると私はデスクトップでの自動的示すモバイル形式を、ブートストラップを使用しようとしたときに私のラップトップのタッチ+マウスがウィンドウを有効にラップトップ

Question

上の開口部を提出モバイルビューを撮影しました。これを解決するには？私は以下のスクリーンショットを添付しました

注：ブートストラップ3はうまくいきます。唯一bootstrap4

でこの問題マイコード：

<header> 
<nav class="navbar navbar-dark bg-dark"> 
    <a class="navbar-brand" href="#"> 
    <img src="images/logo.png" class="d-inline-block align-top" alt=""> 
    </a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button> 

<div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
    <li class="nav-item active"> 
     <a class="nav-link" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Disabled</a> 
    </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
    <button class="btn btn-outline-success" type="button">Main button</button> 
    </form> 
</div> 
</nav> 
</header> 

Answer 1

あなたはdocumentation of bootstrap

に記載Navbarsはラッピングを必要として正しいHTMLを使用する必要があります.navbar .navbar-expand {-sm | -md | -lg | -xl}を使用すると、応答可能な折りたたみが行われます

このクラスは無視されているため、常に折りたたまれています。

あなたにもマークアップにかなり変更する必要がちょうど4にブートストラップ3からCSSを変更するには十分ではありません。