Hvorfor justeres ikke knapper og innganger godt i bootstrap? Jeg prøvde noe enkelt som:
<input type="text"/><button class="btn">button</button>
Knappen er omtrent 5px lavere enn inngangen i chrome / firefox!!
Som vist i svaret fra @abimelex, kan innganger og knapper justeres ved hjelp av .input-group
-klassene (se http://getbootstrap.com/components/#input-groups-buttons):
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Denne løsningen er lagt til for å holde svaret mitt oppdatert, men vennligst hold din opp-stemme på svaret gitt av @abimelex.
Bootstrap tilbyr en .input-append
-klasse, som fungerer som et wrapper-element og korrigerer dette for deg:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Som påpekt av @OleksiyKhilkevich i sitt svar, er det en annen måte å justere input
og button
ved å bruke .form-horizontal
-klassen:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Forskjellen mellom disse to klassene er at .input-append
vil plassere knappen
opp mot input
-elementet (slik at de ser ut som om de er festet), mens .form-horizontal
vil plassere et mellomrom mellom dem.
-- Merk --
For at input
- og button
-elementene skal kunne stå ved siden av hverandre uten mellomrom, er font-size
satt til 0
i .input-append
-klassen (dette fjerner det hvite mellomrommet mellom inline-block
-elementene). Dette kan ha en negativ effekt på skriftstørrelsene i input
-elementet hvis du ønsker å overstyre standardverdiene ved hjelp av em
- eller %
-målinger.
Bruk .form-inline = Dette vil venstrejustere etiketter og inline-blokk-kontroller for en kompakt layout
Eksempel:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Høyrejusterer etiketter og flytter dem til venstre slik at de vises på samme linje som kontrollene, noe som er bedre for skjemalayout med to kolonner.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Eksempler: http://twitter.github.io/bootstrap/base-css.html#forms