Warum lassen sich Schaltflächen und Eingaben in Bootstrap nicht gut ausrichten? Ich versuchte etwas einfaches wie:
<input type="text"/><button class="btn">button</button>
Die Schaltfläche ist etwa 5px niedriger als die Eingabe in Chrome/Firefox
Wie in der Antwort von @abimelex gezeigt, können Eingaben und Schaltflächen durch die Verwendung der Klassen .input-group
ausgerichtet werden (siehe 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>
Diese Lösung wurde hinzugefügt, um meine Antwort auf dem neuesten Stand zu halten, aber bitte bleiben Sie bei [der von @abimelex bereitgestellten Antwort] (https://stackoverflow.com/a/22592382/681807).
Bootstrap bietet eine .input-append
Klasse, die als Wrapper-Element arbeitet und dies für Sie korrigiert:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Wie von @OleksiyKhilkevich in seiner Antwort erwähnt, gibt es eine zweite Möglichkeit, input
und button
mit Hilfe der Klasse .form-horizontal
auszurichten:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Der Unterschied zwischen diesen beiden Klassen besteht darin, dass .input-append
den Button
an das input
-Element anlegt (so dass es so aussieht, als wären sie angehängt), während .form-horizontal
einen Abstand zwischen ihnen anlegt.
-- Hinweis --
*Damit die Elemente input
und button
ohne Abstand nebeneinander stehen können, wurde die font-size
in der Klasse .input-append
auf 0
gesetzt (dadurch wird der weiße Abstand zwischen den inline-block
Elementen entfernt). Dies kann sich nachteilig auf die Schriftgrößen im input
-Element auswirken, wenn Sie die Standardwerte mit em
- oder %
-Messungen überschreiben wollen.
Nur die Vorwarnung, es scheint eine spezielle CSS-Klasse für diese namens "form-horizontal".
input-append hat einen weiteren Nebeneffekt, nämlich die Verringerung der Schriftgröße auf Null
Verwenden Sie .form-inline = Damit werden Beschriftungen und Inline-Block-Steuerelemente für ein kompaktes Layout linksbündig ausgerichtet; Beispiel:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Beschriftungen rechtsbündig und linksbündig, so dass sie in derselben Zeile wie die Steuerelemente erscheinen, was für ein zweispaltiges Formularlayout besser ist.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Beispiele: http://twitter.github.io/bootstrap/base-css.html#forms