Bootstrap v3.3.7 Einstellung Sucheingabe des navbar Breite

Question

Ich bin kein erfahrener Bootstrap Benutzer und ich bin vor folgendes Problem:

<header class="header"> 
    <nav class="primary-nav navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button"> 
      <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="index.html">Hello</a> 
     </div> 
     <div class="collapse navbar-collapse" id="primary-nav"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="index.html">Welcome</a></li> 
      <li><a href="#">Foo</a></li> 
      <li><a href="#">Bar</a></li> 
     </ul> 
     <form class="search navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
      <label class="has-clear"> 
       <input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text"> 
       <span aria-hidden="true" class="form-control-clear glyphicon " id="clear-search"></span> 
      </label> 
      </div> 
     </form> 
     </div> 
    </div> 
    </nav> 
</header> 

codepen der Begleiter sehen.

Mit dieser ziemlich trivial navbar-Setup gibt es zwei Dinge, die ich Schwierigkeiten zu korrigieren haben:

sollte

1. Ich verstehe nicht, warum ich benutzerdefinierte CSS loswerden Suchfeld margin-bottom, imho stock Bootstrap CSS benötigen damit umgehen aber vielleicht habe ich einen Fehler gemacht
2. ich keine Möglichkeit, sicher finden könnte die Sucheingabe macht die Breite des navbar füllen, ohne eine absolute Breite in Pixel Angabe

Während ich 1. verwalten kann, kann ich kein korrektes Verhalten für die Sucheingabe der Navbar erreichen, das die volle Breite annehmen und verschwinden sollte, wenn das "Hamburger" -Menü erscheint.

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Verwendung dieses css

#search-input{ 
 
    width: 100px;//specify width according to your requirement 
 
}

Answer 2

es in visualisieren Vollbild

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<header> 
 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button"> 
 
      <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="index.html">Hello</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="primary-nav"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="index.html">Welcome</a> 
 
      </li> 
 
      <li><a href="#">Foo</a> 
 
      </li> 
 
      <li><a href="#">Bar</a> 
 
      </li> 
 
     </ul> 
 

 
     <form class="navbar-form" role="search"> 
 
      <div class="form-group" style="display:inline;"> 
 
      <div class="input-group" style="display:table;"> 
 
       <input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text"> 
 
       <span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>