Texteingabe in der Bootstrap-Navigationsleiste

Question

Ich verwende Bootstrap, um eine Navigationsleiste zu erstellen, und wenn ich versuche, eine Suchleiste hinzuzufügen, wird sie unterhalb der anderen Elemente statt neben ihnen angezeigt.

Ich habe jQuery und das Bootstrap-JavaScript nach allem importiert, zusammen mit dem Bootstrap CSS im Kopf-Tag importiert.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <a class="navbar-brand" href="#"><img src="logo.png"></a> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">Home</a></li> 
 

 
      <form class="navbar-form"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
      <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
 
     </form> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

1. Sie die Default navbar als Probe verwenden können. Geben Sie das Formular außerhalb des <ul></ul> Blocks ein.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <a class="navbar-brand" href="#"><img src="logo.png"></a> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Home</a></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"><span class="glyphicon glyphicon-search"></span></button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>