menus déroulants navbar afficher le problème sur les appareils mobiles et petits avec requête média

Question

Pas un grand expert en conception de CSS et de réactivité, je tente de réduire ma barre de navigation à l'aide d'une requête multimédia. Le problème est que pour les menus déroulants, le design responsive n'est pas appliqué correctement: Les menus déroulants sont affichés comme sur un grand appareil de bureau.

Ce que je veux est ceci:

Result Expected

Mais le résultat que j'obtenir est la suivante:

Current result

Mon code est en fait ce qui suit:

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a> 

      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 

        </li> 
        <li><a href="#">Link</a> 

        </li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">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><a href="#">Separated link</a> 

          </li> 
          <li class="divider"></li> 
          <li><a href="#">One more separated link</a> 

          </li> 
         </ul> 
        </li> 
       </ul> 
       <form class="navbar-form navbar-left" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Link</a> 

        </li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">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><a href="#">Separated link</a> 

         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

Et ma requête médiatique est la courant un comme j'ai trouvé googler le web:

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

Informations complémentaires: Le menu est affiché bien lorsque la taille de la fenêtre est sous 768px.

Je suppose qu'il manque quelque chose dans ma requête média pour gérer le menu déroulant, mais je ne sais pas de quoi il s'agit? Quelqu'un peut-il m'aider?

Merci beaucoup.

Answer 1

ici est votre violon simplement supprimer la liste déroulante de style par défaut

jsfiddle.net/qxgy6L9b/18/