Wie wird die Eingangsgröße der Bootstrap3-Navbar mit dem Rest des Platzes gefüllt?

Question

Ich mag die Eingangsgruppe in navbar-Formular verwenden, wie folgenden Code:

<form class="navbar-form navbar-left" role="search"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="product" type="text"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Search</button> 
     </span> 
    </div> 
</form> 

Es Größe über 200px in firefox fixiert wurde. In Chrome oder Safari nimmt die Suche jedoch eine ganz neue Linie. Ich möchte wissen, ob die css von bootstrap die Breite des Inputs steuert.

input-group-btn hat zwei css-einstellungen, display: table-cell; Breite: 1%. Wozu dienen diese?

In der Dokumentation, die Standard-Suchleiste ist:

<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">Submit</button> 
</form> 

Es funktioniert sowohl in Firefox oder Chrome, aber ich will es den Rest der navbar des Raumes nehmen. Wie die Suchleiste von Facebook.

Ich bin ein einzelner Entwickler, ich bin nicht gut im Front-End-Design, Weiß jemand etwas über diese besondere Anfrage?

Answer 1

Ich hatte das gleiche Problem gerade jetzt.

Ich benutze Safari und leider nimmt das Formularelement die ganze Zeile (100% der Größe) (aber auf Firefox, tut es nicht).

Eine einfache und einfache Lösung wäre es, die Breite der Form unter 100% zu präzisieren.

<form class="navbar-form navbar-left" style="width:40%" role="search"> 
    <div class="input-group"> 
     <input class="form-control" placeholder="product" type="text"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Search</button> 
     </span> 
    </div> 
</form> 

Hinweis: width-40 Klasse anstelle des style Attribut fixieren nicht ... weiß nicht, warum aber.

Answer 2

Man könnte so etwas wie dieses versuchen ... (dieses Beispiel zeigt eine Möglichkeit, Bootstraps Navbar verwenden)

<div id="wrap"> 
<div class="navbar navbar-fixed-top" style="z-index:11000"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li> - your nave items would each be placed into here </li> 
      <li> - your nave items would each be placed into here </li> 
      <li> - your nave items would each be placed into here </li> 
     </ul>   
     </div> 
    </div> 
    </div> 
</div> 
</div> 

Sie können in einem der Listenelement-Tags statt Klassifizierung der Navigationsleiste des Formular-Tag platzieren als eine Form selbst.

Answer 3

Es ist ein Chrome-Bug (siehe here). Es besteht keine Notwendigkeit, hartes CSS zu verwenden. Sie können das Problem beheben, indem:

.Weniger

@media (min-width: @grid-float-breakpoint) { 
    .navbar-form { 
    .input-group-btn, 
    .input-group-addon { 
     width : auto; 
    } 
    } 
} 

oder .css-

@media (min-width: 768px) { 
    .navbar-form .input-group-btn, 
    .navbar-form .input-group-addon { 
    width: auto; 
    } 
}