Wie richtet man das Suchformular innerhalb der Navbar-Kopfzeile aus?

Question

Ich habe ein Markenbild und eine Liste mit 2 glyph-icons & und Suchformular in einem Navbar-Header, aber die Suchformular-Schaltfläche wird nicht innerhalb der Nav-Leiste bleiben und fällt auf die Zeile darunter.

Kennt jemand den CSS-Trick, um es in die gleiche Zeile neben den Rest der li-Links zu bekommen?

Alle CSS-Befehle sind systemeigene Bootstraps.

Um vollständig zu verstehen, ein aktuelles Foto:

HTML:

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <div class="navbar-header"> 
     <img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/> 
     </div> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"></a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
     <li> 
      <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

Sein einfach Sie haben es die CSS-Regel display: inline-block; zu Ihrem form-group und das ist, hinzuzufügen. Man könnte sogar die umliegenden li

prüfen Fiddle

Answer 2

Add Klasse .form-inline zum .form-control div entfernen. Fügen Sie auch die Schaltfläche div ein.

Sehen Sie das Ergebnis:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <div class="navbar-header"> 
 
     <img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/> 
 
     </div> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
 
     <li> 
 
      <div class="form-group form-inline"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

http://jsbin.com/gogeyiy/edit?html,output

Answer 3

Statt Form Gruppe Sie Eingangsgruppe wie diese versuchen: Demo

<div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      <span class="input-group-btn"> 
    <button class="btn btn-default" type="button">Submit</button> 
     </span> 
</div>