Bootstrap: Input auf gleicher Höhe mit Button

Eine Sache die ich bei Bootstrap immer wieder vergesse und immer wieder im falschen Teil der Bootstrap Dokumentation nachsehe ist das alignen von einem Input mit einem Button.

Um das folgende Resultat zu erzielen:

Selection_001Ist folgender HTML-Code nötig:

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

Ein Label kann man folgend erweise hinzufügen

<label for="some_id">Test</label>
<div class="input-group">
   <input type="text" class="form-control" id="some_id">
   <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

Den Button auf die Linkeseite zu bringen geht folgendermaßen:

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

Dank geht raus an:

http://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button

http://getbootstrap.com/components/#input-groups-buttons

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.