Bootstrap: Ausrichtung mit Taste ausrichten

Warum passen Schaltflächen und Eingaben in Bootstrap nicht gut zusammen?

Ich habe etwas Einfaches ausprobiert wie:

<input type="text"/><button class="btn">button</button>

Die Schaltfläche ist ungefähr 5pxniedriger als die Eingabe in Chrome / Firefox.

Twitter Bootstrap 4

In Twitter Bootstrap 4 können Eingaben und Schaltflächen mithilfe der Klassen input-group-prependund ausgerichtet werden input-group-append(siehe https://getbootstrap.com/docs/4.0/components/input-group/#button-addons ).

Gruppentaste auf der linken Seite (vorangestellt)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Gruppentaste auf der rechten Seite (anhängen)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Twitter Bootstrap 3

Wie in der Antwort von @abimelex gezeigt, können Eingaben und Schaltflächen mithilfe der .input-groupKlassen ausgerichtet werden (siehe http://getbootstrap.com/components/#input-groups-buttons ).

Gruppentaste auf der linken Seite

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

Gruppentaste auf der rechten Seite

<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. Bitte stimmen Sie jedoch über die Antwort von @abimelex ab .

Twitter Bootstrap 2

Bootstrap bietet eine .input-appendKlasse an, die als Wrapper-Element fungiert und dies für Sie korrigiert:

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

Wie @OleksiyKhilkevich in seiner Antwort hervorhob, gibt es eine zweite Möglichkeit, die Klasse auszurichten inputund zu buttonverwenden .form-horizontal:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

Die Unterschiede

Der Unterschied zwischen diesen beiden Klassen ist , dass .input-appendder Ort wird buttongegenüber dem inputElement (so sehen sie aus wie sie gebunden sind), wo .form-horizontalein Raum zwischen ihnen stattfinden wird.

-- Hinweis --

Damit die Elemente inputund buttonohne Abstand nebeneinander stehen können, font-sizewurde 0in der .input-appendKlasse der Wert auf festgelegt (dadurch wird der weiße Abstand zwischen den inline-blockElementen entfernt). Dies kann sich nachteilig auf die Schriftgrößen im inputElement auswirken, wenn Sie die Standardeinstellungen mithilfe von emoder %Messungen überschreiben möchten .

Sie können die Eigenschaft der Eingabegruppenschaltfläche verwenden , um die Schaltfläche direkt auf das Eingabefeld anzuwenden.

Bootstrap 3 & 4

<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><!-- /input-group -->

Werfen Sie einen Blick auf BS4 Eingangs-Gruppe doc für viele weitere Beispiele.

Nur die Köpfe hoch, es scheint eine spezielle CSS-Klasse dafür zu geben form-horizontal

Input-Append hat einen weiteren Nebeneffekt: Die Schriftgröße wird auf Null gesenkt

Verwenden Sie .form-inline = Hiermit werden Beschriftungen und Inline-Block-Steuerelemente für ein kompaktes Layout nach links ausgerichtet.

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

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-horizontal = Beschriftungen nach rechts ausrichten und nach links verschieben, damit sie in derselben Zeile wie die Steuerelemente angezeigt werden. Dies ist besser für das Formularlayout mit zwei Spalten.

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

Beispiele: http://twitter.github.io/bootstrap/base-css.html#forms

Ich habe es vor allem versucht und am Ende einige Änderungen vorgenommen, die ich gerne teilen möchte. Hier ist der Code, der für mich funktioniert (finden Sie den beigefügten Screenshot):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

Wenn Sie möchten, dass es funktioniert, verwenden Sie einfach den folgenden Code in Ihrem Editor:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

Hoffe das hilft.

Ich hatte auch mit dem gleichen Problem zu kämpfen. Die von mir verwendeten Bootstrap-Klassen funktionieren bei mir nicht. Ich habe eine Problemumgehung wie folgt gefunden:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

Grundsätzlich habe ich die Anzeigeeigenschaft der Klasse "Formularsteuerung" überschrieben und andere Stileigenschaften zum Korrigieren der Größe und Position verwendet.

Folgendes ist das Ergebnis:

Bootstrap 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Ich habe alle oben genannten Codes ausprobiert und keiner von ihnen hat meine Probleme behoben. Hier ist, was für mich funktioniert hat. Ich habe das Input-Group-Addon verwendet.

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

Nicht direkt verwandt, es sei denn, Sie haben einen ähnlichen Code, aber ich habe gerade ein seltsames Verhalten gegenüber form-inline, Bootstrap 3.3.7, bemerkt

Ich habe hierfür keine Zeilen und Zellen verwendet, da es sich um ein Desktop-Projekt handelt, wenn sich das öffnende Tag unter der Tabelle befindet (in diesem Fall):

<table class="form-inline"> 
<form> 
<tr>

Formularelemente würden gestapelt.

Schalten Sie und es richtig ausgerichtet.

<form>
<table class="form-inline">
<tr>

Safari 10.0.2 und das neueste Chrome haben keine Unterschiede gemacht. Vielleicht war mein Layout falsch, aber es ist nicht sehr verzeihend.

Nehmen Sie einen Eingabe-Float wie links. Dann nimm den Knopf und schwebe ihn nach rechts. Sie können die Klasse löschen, wenn Sie mehr als eine Klasse zur Entfernung benötigen.

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

style="padding-top: 8px"

Verwenden Sie diese Option, um Ihr Div in Ihrer Reihe nach oben oder unten zu verschieben. Wirkt Wunder für mich.