bootstrap: lijn invoer uit met knop

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!!

Programmering
css twitter-bootstrap
16de2 mei 2012 в 9:39
1 kijk op
Oplossing

Twitter Bootstrap 3

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):

Groepknop aan de linkerkant

<div class="input-group">
  <span class="input-group-btn">
    Go!
  </span>
  <input type="text" class="form-control">
</div>

Groepknop aan de rechterkant

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        Go!
   </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.

Twitter Bootstrap 2

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
</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
</div>

De verschillen

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.

Community
Bewerkt antwoord 23ste1 mei 2017 в 12:10
Commentaren (7)

Gewoon de heads up, lijkt er een speciale CSS-klasse voor deze genaamd form-horizontal

input-append heeft een ander neveneffect, dat het font-size naar nul zet

Commentaren (1)

Gebruik .form-inline = Dit zal labels en inline-block controls links uitlijnen voor een compacte layout

Voorbeeld: http://jsfiddle.net/hSuy4/292/

<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

Commentaren (5)