Grupy wejściowe większe niż dane wejściowe w Bootstrap 3 przy użyciu kontenera Jumbotron

Question

Eksperymentuję z dziwnym zachowaniem z grupami wejściowymi Bootstrap 3. Kiedy dodaję grupę wejściową-addon (tekst lub ikonę) do formularza wewnątrz jumbotronu, wysokość grupy wejściowej jest większa niż wysokość wejściowa.

Tutaj można znaleźć JsFiddle oraz zrzut ekranu z problemem:

<div class="jumbotron"> 
    <h1>Jumbotron with form</h1> 
     <form> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Username"> 
        <span class="input-group-addon">@</span> 
      </div> 
     </form> 
    </div> 

żywo przykład na http://jsfiddle.net/DTcHh/

Zrzut ekranu:

Jak mogę rozwiązać ten problem? Szukam rozwiązania Bootstrap, ale jeśli nie jest to możliwe, byłoby miło, gdybyś pomógł mi go naprawić za pomocą reguł CSS.

Answer 1

ładowania początkowego rozwiązaniem jest dodanie klasy input-group-lg na zawierającego <div> - jak shown in the documentation, ale zauważysz dodatku wciąż jest nieco większy niż na wejściu, dzięki czemu można po prostu ustawić wysokość <input> dopasować; I dodano 5 px:

http://jsfiddle.net/DTcHh/21/

Answer 2

Patrząc na doc Bootstrap jako sugeruje Adrift, oryginalny kod wygląda całkowicie poprawny. Dodanie klasy input-group-lg jest wspaniałe, jeśli chcesz LARGE, ale jeśli nie, to jest źle. Używając IE9 i uruchamiając twój kod zarówno w moim własnym środowisku deweloperskim, jak i jsfiddle Adrift, działa poprawnie (dla mnie) z i bez klasy input-group-lg, z tym wyjątkiem, że z nią jest renderowana duża. Być może problem związany z przeglądarką?

Podobno mam podobny problem, próbując dodać przycisk radiowy z przodu selektora. No cóż ...

Answer 3

Głównym problemem .input-group-addon wielkości w .jumbotron jest to, że dziedziczy font-size z .jumbotron.

Zazwyczaj ludzie próbują zmienić wysokość, min-height lub wyściółkę itp

Jednak przyczyną różnej wielkości jest to, że .input-group w .jumbotron dziedziczy "font-size: 21px;"

Należy zmienić font-size z .input-groupNOT jak poniżej.

.input-group { font-size: 14px !important; } 

Answer 4

Zeszłej nocy miałem dokładnie ten sam problem. Żadna z powyższych poprawek nie działała w moim kontekście. W końcu udało się ustawić margines na 0:

.input-group .form-control { 
    margin: 0px !important; 
} 

Być może to pomaga komuś z podobnym problemem!

Answer 5

Naprawiłem go dodając id="search_button" do mojego przycisku:

<div class="input-group input-group-lg"> 
    <input type="text" class="form-control" placeholder="Username"/> 
    <span class="input-group-btn"> 
     <button id="search_button" class="btn btn-primary" type="button">GO</button> 
    </span> 
</div> 

Następnie zastosowano następujące styl do mojego przycisku:

#search_button { 
    width: 90px; 
    margin: 0 auto; 
    text-align: justify; 
} 

To wszystko.

Answer 6

Zamiast zwiększać wartość wejściową, należy pomniejszyć zakres (wejście-grupa-addon). Aby to zrobić, zmniejsz jego wypełnienie. A więc:

.input-group-addon { 
    padding: 0px 6px; 
}