Bootstrap 3.1.1 Navigationsleiste Maximale Eingabe nicht mehr in 3.2.0 maximiert

Question

Frage: Wie kann ich eine maximierte Sucheingabe in einer Bootstrap 3.2.0 Navigationsleiste erhalten?

In Bootstrap 3.1.1 Ich habe den folgenden Code für eine feste untere Navigationsleiste verwendet, um eine maximierte Sucheingabe anzuzeigen.

<nav class="navbar navbar-default navbar-fixed-bottom" role="seasrch"> 
    <div class="container"> 
     <form class="navbar-form"> 
      <div class="form-group"> 
       <div class="input-group input-group-sm"> 
        <div class="input-group-btn"> 
         <a href="#" id="new_term" class="btn btn-default" role="button"><span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;New</a> 
         <a href="/terms.php" class="btn btn-default" role="button"><span class="glyphicon glyphicon-tree-deciduous"></span>&nbsp;&nbsp;All</a> 
        </div> 
        <input type="input" class="form-control" name="search_bar_text" /> 
        <div class="input-group-btn"> 
         <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</nav> 

Und es sah wie folgt aus:

Mein Navigationsleiste sieht wie folgt aus, nach dem Upgrade 3.2.0 Bootstrap:

Answer 1

ich die gleiche unerwartete Erfahrung hatte, wie ich ein Upgrade von 3.1.1 bis 3.2.0 - meine (oberste) Navbar-Form, die früher die volle Breite des Bildschirms einnahm, war jetzt nur ein kurzes Element. Dies ist, was für mich in meiner benutzerdefinierten CSS gearbeitet, die nach dem Bootstrap lädt auf (das ist, wie ich Bootstrap außer Kraft setzen, während ihre ursprüngliche saubere verkleinerte Version Erhaltung):

/* Boostrap CSS 3.2.0 had these new lines in the navbar-form that 
    were different from 3.1.1 [it's all in @media (min-width: 768px) 
    so this behavior only shows up on higher resolutions] */ 
.navbar-form .input-group { 
    display: inline-table; 
    vertical-align: middle; 
} 
.navbar-form .input-group .input-group-addon, 
.navbar-form .input-group .input-group-btn, 
.navbar-form .input-group .form-control { 
    width: auto; /* HERE IS THE CULPRIT */ 
} 
/** SOLUTION: in custom CSS **/ 
/* make sure navbar-form's input-group goes 100% i.e. full width of screen 
    to compliment the display: inline-table; that showed up in 3.2.0 */ 
.navbar-form .input-group { 
     width: 100%; 
} 
/* override width: auto; that showed up in 3.2.0 
    with at least 1px for the addon or btn (I had an addon) */ 
.navbar-form .input-group .input-group-addon, 
.navbar-form .input-group .input-group-btn { 
     width: 1px; 
} 
/* separate .form-control and give it width: 100%; */ 
.navbar-form .input-group .form-control { 
     width: 100%; 
} 

Answer 2

Fügen Sie einfach an Ihre benutzerdefinierte CSS-Datei:

.navbar-form .input-group { 
    display: table; 
} 
.navbar-form .input-group .input-group-addon, 
.navbar-form .input-group .input-group-btn { 
    white-space: nowrap; 
    width: 1%; 
} 
.navbar-form .input-group .form-control { 
    width: 100%; 
} 

Answer 3

edit: forms.less von Bootstrap 3,2

uncomment Linie 411 und 422

.form-control { 
    display: inline-block; 
    // width: auto; // uncomment by sebush // Prevent labels from stacking above inputs in `.form-group` 
    vertical-align: middle; 
} 

.input-group { 
    display: inline-table; 
    vertical-align: middle; 

    .input-group-addon, 
    .input-group-btn, 
    .form-control { 
    // width: auto; // uncomment by sebush 
    } 
}