Bootstrap Standard Navbar Suchformular Splits auf Chrom

Question

Ich versuche Bootstrap zu lernen, aber ich habe Probleme mit Multi-Browser-Unterstützung. Die standardmäßige inverse navbar sieht auf firefox gut aus, aber die Suchform wird auf chrome aufgeteilt. Ich habe versucht, Col-Sm-* aber war keine Hilfe? Warum bin ich mit diesem Problem konfrontiert? Gibt es trotzdem dieses Problem zu lösen, ohne benutzerdefinierte CSS? Ich überprüfte diese Frage auch Bootstrap navbar-form width issue on chrome Dies ist etwas ähnliches Problem, aber in meinem Fall Suchsymbol geht in die rechte Ecke des Nav und Eingabefeld in der linken Ecke. Hier ist mein html für navbar

<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="padding-right: 10px;"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 

     <a class="navbar-brand" href="#">Hello</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class=" nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 

     <li class="dropdown"> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <div class="input-group"> 
        <input type="text" class="form-control"> 
        <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"><span class='glyphicon glyphicon-search'></span></button> 
        </span> 
      </div> 
     </div> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 1

Es sieht aus wie Sie benötigen, um:

• die Klasse entfernen, "navbar-links", aus dem Formular-Tag auf der Linie 18,
• und die Klasse, "Form-Gruppe", aus dem div auf der Leitung 19.

So:

es Fabrikat:

<form class="navbar-form" role="search"> 
<div> 

Answer 2

ich beschlossen, diesen Zusatz fester Breite in der Form-Gruppe div:

<div class="input-group" style="width: 150px;"> 
         <input type="text" name="q" style="width:150px" class="input-sm form-control" placeholder="Recherche"> 
         <span class="input-group-btn"> 
          <button type="submit" formaction="index.php" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span></button> 
         </span> 
        </div> 

See doc hier (und sehen Sie die fett Note): link