Bootstrap: wyrównaj dane z przyciskiem

Dlaczego przyciski i wejścia nie są dobrze dopasowane w Bootstrap?

Próbowałem czegoś prostego, takiego jak:

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

Przycisk jest 5pxmniej więcej niż wejście w chrome / firefox.

Bootstrap na Twitterze 4

W Twitterze Bootstrap 4 dane wejściowe i przyciski można wyrównać za pomocą klas input-group-prependi input-group-append(patrz https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Przycisk grupy po lewej stronie (prepend)

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

Przycisk grupy po prawej stronie (dołącz)

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

Bootstrap na Twitterze 3

Jak pokazano w odpowiedzi @abimelex, dane wejściowe i przyciski można wyrównać za pomocą .input-groupklas (patrz http://getbootstrap.com/components/#input-groups-buttons )

Przycisk grupy po lewej stronie

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

Przycisk grupy po prawej stronie

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

To rozwiązanie zostało dodane, aby moja odpowiedź była aktualna, ale proszę o głosowanie na odpowiedź udzieloną przez @abimelex .

Twitter Bootstrap 2

Bootstrap oferuje .input-appendklasę, która działa jako element otoki i koryguje to dla ciebie:

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

Jak zauważył @OleksiyKhilkevich w swojej odpowiedzi, istnieje drugi sposób na wyrównanie inputi buttonużycie .form-horizontalklasy:

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

Różnice

Różnica między tymi dwiema klasami polega na tym, .input-appendże umieści buttonsię na inputelemencie (tak, aby wyglądały, jakby były przymocowane), gdzie .form-horizontalumieści między nimi przestrzeń.

-- Uwaga --

Aby elementy inputi buttonmogły być obok siebie bez odstępów, font-sizeustawiono opcję 0w .input-appendklasie (usuwa to białe odstępy między inline-blockelementami). Może to mieć niekorzystny wpływ na rozmiary czcionek w inputelemencie, jeśli chcesz zastąpić wartości domyślne za pomocą emlub %pomiarów.

możesz użyć właściwości przycisku grupy wejściowej, aby zastosować przycisk bezpośrednio w polu wejściowym.

Bootstrap 3 i 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 -->

Zapoznaj się z dokumentem BS4 Input-Group, aby uzyskać więcej przykładów.

Tylko heads-up, wydaje się, że istnieje specjalna klasa CSS do tego tzw form-horizontal

input-append ma inny efekt uboczny, polegający na tym, że rozmiar czcionki spada do zera

Użyj .form-inline = Spowoduje to wyrównanie do lewej etykiet i elementów sterujących bloku w wierszu dla kompaktowego układu

Przykład: http://jsfiddle.net/hSuy4/292/

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

.form-horizontal = Wyrównaj etykiety do prawej i przesuń je w lewo, aby pojawiały się w tym samym wierszu co formanty, co jest lepsze dla układu formularza z 2 kolumnami.

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

Przykłady: http://twitter.github.io/bootstrap/base-css.html#forms

Próbowałem przede wszystkim i skończyłem z kilkoma zmianami, którymi chciałbym się podzielić. Oto kod, który działa dla mnie (znajdź załączony zrzut ekranu):

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

Jeśli chcesz, aby działało, po prostu użyj poniższego kodu w swoim edytorze:

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

Mam nadzieję że to pomoże.

Walczyłem również z tym samym problemem. Klasy bootstrap, których używam, nie działają dla mnie. Wymyśliłem obejście, jak poniżej:

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

Zasadniczo przesłoniłem właściwość display klasy „form-control” i użyłem innych właściwości stylu do korekcji rozmiaru i położenia.

Oto wynik:

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>

Wypróbowałem wszystkie powyższe kody i żaden z nich nie naprawił moich problemów. Oto, co zadziałało dla mnie. Użyłem addon-group-addon.

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

Nie ma bezpośredniego związku, chyba że masz podobny kod, ale zauważyłem dziwne zachowanie w stosunku do form-inline, bootstrap 3.3.7

Nie użyłem do tego wiersza i komórek, ponieważ jest to projekt pulpitu, jeśli znacznik otwierający znajdował się pod tabelą (w tym przypadku):

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

Elementy formularza będą się układać.

Przełącznik i jest prawidłowo ustawiony.

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

Safari 10.0.2 i najnowszy Chrome nie wprowadziły żadnych różnic. Może mój układ był zły, ale nie jest zbyt wybaczający.

Weź zmiennoprzecinkowe wejście w lewo. Następnie weź przycisk i ustaw go w prawo. Możesz wyczyścić klasę, jeśli pokonujesz więcej niż jedną odległość.

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

Użyj tego, aby przesunąć div w górę lub w dół w swoim rzędzie. Działa dla mnie cuda.