Bootstrap: alinhar a entrada com o botão

Por que os botões e as entradas não se alinham bem no Bootstrap?

Eu tentei algo simples como:

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

O botão é mais 5pxbaixo que a entrada no chrome / firefox.

Twitter Bootstrap 4

No Twitter Bootstrap 4, entradas e botões podem ser alinhados usando as classes input-group-prepende input-group-append(consulte https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Botão Agrupar no lado esquerdo (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>

Botão Agrupar no lado direito (anexar)

<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

Conforme mostrado na resposta de @abimelex, entradas e botões podem ser alinhados usando as .input-groupclasses (consulte http://getbootstrap.com/components/#input-groups-buttons )

Botão de grupo no lado esquerdo

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

Botão de grupo no lado direito

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

Esta solução foi adicionada para manter minha resposta atualizada, mas faça seu voto positivo na resposta fornecida por @abimelex .

Twitter Bootstrap 2

O Bootstrap oferece uma .input-appendclasse, que funciona como um elemento wrapper e corrige isso para você:

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

Como apontado por @OleksiyKhilkevich em sua resposta, existe uma segunda maneira de alinhar inpute buttonusando a .form-horizontalclasse:

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

As diferenças

A diferença entre essas duas classes é que .input-appendcolocará buttono inputelemento contra o elemento (para que pareçam estar anexados), onde .form-horizontalcolocará um espaço entre eles.

-- Nota --

Para permitir a inpute buttonelementos de ser ao lado do outro sem espaçamento, o font-sizefoi definido como 0na .input-appendclasse (isto remove o espaçamento branco entre os inline-blockelementos). Isso pode ter um efeito adverso no tamanho da fonte do inputelemento, se você deseja substituir os padrões usando emou %medidas.

você pode usar a propriedade do botão do grupo de entrada para aplicar o botão diretamente ao campo de entrada.

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

Dê uma olhada no documento do grupo de entrada do BS4 para muitos outros exemplos.

Apenas o aviso, parece haver uma classe CSS especial para isso chamada form-horizontal

input-append tem outro efeito colateral, que reduz o tamanho da fonte a zero

Use .form-inline = Isso alinhará os rótulos à esquerda e os controles de bloco em linha para um layout compacto.

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

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

.form-horizontal = Alinhe os rótulos à direita e flutue-os para a esquerda para fazê-los aparecer na mesma linha dos controles, o que é melhor para o layout de formulário de 2 colunas.

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

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

Tentei acima de tudo e terminei com poucas alterações que gostaria de compartilhar. Aqui está o código que funciona para mim (encontre a captura de tela em anexo):

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

Se você quiser vê-lo funcionando, basta usar o código abaixo no seu 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>

Espero que isto ajude.

Eu também estava lutando com o mesmo problema. As classes de inicialização que eu uso não estão funcionando para mim. Eu vim com uma solução alternativa, como abaixo:

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

Basicamente, substituí a propriedade display da classe "form-control" e usei outras propriedades de estilo para corrigir o tamanho e a posição.

A seguir está o resultado:

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>

Tentei todos os códigos acima e nenhum deles corrigiu meus problemas. Aqui está o que funcionou para mim. Eu usei input-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>

Não está diretamente relacionado, a menos que você tenha um código semelhante, mas notei um comportamento estranho ao formulário em linha, bootstrap 3.3.7

Eu não usei linha e células para isso, pois é um projeto de área de trabalho, se a tag de abertura estivesse abaixo da tabela (neste caso):

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

Os elementos do formulário seriam empilhados.

Interruptor e alinhado corretamente.

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

O Safari 10.0.2 e o Chrome mais recente não fizeram nenhuma diferença. Talvez meu layout estivesse errado, mas não perdoasse muito.

Pegue um flutuador de entrada como à esquerda. Então pegue o botão e flutue para a direita. Você pode corrigir a classe quando levar mais de um para distanciar.

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

Use isso para mudar sua div para cima ou para baixo na sua linha. Faz maravilhas para mim.