Bootstrap: navbar-colapse div entre navbar

Question

c'est mon problème: collapse problem

Comme vous pouvez le voir ma div-navbar effondrement entre dans la zone de barre de navigation. Pourriez-vous s'il vous plaît m'aider à le réparer?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="#page-top">Title</a> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#dropdown"> 
 
      Menu 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="dropdown"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li> 
 
        <a href="#">Link 1</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Link 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Link 3</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Answer 1

Problème est à propos de vous manqué d'ajouter navbar-header conteneur qui permet de séparer l'en-tête et les sous-menus. Hope it helps

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#page-top">Title</a> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#dropdown"> 
 
       Menu 
 
      </button></div> 
 
    <div class="collapse navbar-collapse" id="dropdown"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 2</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 3</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

Ajouter une classe .m-top-55 dans div id = "menu déroulant" qui fonctionnent sur la petite mise en page

@media only screen and (min-width: 600px) { 
    /* For tablets: */ 
    .m-top-55{ 
     margin-top:55px; 
    } 
} 

Cela permettra de résoudre votre problème.