Bootstrap: navbar-colapse div tritt navbar

Question

dies mein Problem ist: kann collapse problem

Wie Sie meine navbar-Zusammenbruch div betritt Bereich navbar sehen. Könnten Sie mir bitte helfen, es zu reparieren?

<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

Problem ist über Sie vermisst, navbar-header Container hinzufügen, die Header und Untermenüs zu trennen hilft. Hoffe, es

<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

Add Klasse .m-Top-55 in div id = "Dropdown", die Arbeit auf kleines Layout

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

dies Ihr Problem lösen wird.