Waarom zijn knoppen en ingangen niet goed uitgelijnd in bootstrap? Ik probeerde iets simpels als:
<input type="text"/><button class="btn">button</button>
De knop is ongeveer 5px lager dan de input in chrome/firefox!!
Zoals getoond in het antwoord van @abimelex, kunnen inputs en buttons uitgelijnd worden door gebruik te maken van de .input-group
classes (zie 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>
Deze oplossing is toegevoegd om mijn antwoord up-to-date te houden, maar plak alsjeblieft je up-vote op het antwoord van @abimelex.
Bootstrap biedt een .input-append
class, die werkt als een wrapper element en dit voor je corrigeert:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Zoals @OleksiyKhilkevich in zijn antwoord aangeeft, is er een tweede manier om input
en button
uit te lijnen door de .form-horizontal
klasse te gebruiken:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Het verschil tussen deze twee classes is dat .input-append
de knop
tegen het input
element plaatst (zodat het lijkt alsof ze aan elkaar vast zitten), waar .form-horizontal
er een spatie tussen plaatst.
-- Note --
Om de input
en button
elementen naast elkaar te laten staan zonder tussenruimte, is de font-size
op 0
gezet in de .input-append
class (dit verwijdert de witte tussenruimte tussen de inline-block
elementen). Dit kan een nadelig effect hebben op de lettergrootte in het input
element als je de standaardwaarden wilt overschrijven met em
of %
metingen.
Gebruik .form-inline = Dit zal labels en inline-block controls links uitlijnen voor een compacte layout
Voorbeeld:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Etiketten rechts uitlijnen en naar links laten zweven om ze op dezelfde lijn te laten verschijnen als de besturingselementen, wat beter is voor een 2 koloms formulier layout.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Voorbeelden: http://twitter.github.io/bootstrap/base-css.html#forms