Rótulo no lado esquerdo em vez de acima de um campo de entrada

Eu gostaria de ter os rótulos não acima do campo de entrada, mas no lado esquerdo.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Este código me dá:

Eu gostaria de ter:

Você pode usar a classe form-inline para cada form-group :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Coloque o <label>lado de fora do form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

A documentação do Bootstrap 3 fala sobre isso na guia de documentação CSS na seção intitulada "Requer larguras personalizadas", que afirma:

Inputs, selects e textareas são 100% largos por padrão no Bootstrap. Para usar o formulário embutido, você terá que definir uma largura nos controles de formulário usados ​​dentro.

Se você usar seu navegador e ferramentas Firebug ou Chrome para suprimir ou reduzir o estilo de "largura", deverá ver as coisas alinhadas como você deseja. Obviamente, você pode criar o CSS apropriado para corrigir o problema.

No entanto, acho estranho que eu precise fazer isso. Não pude deixar de sentir que essa manipulação era irritante e, a longo prazo, sujeita a erros. Por fim, usei uma classe fictícia e um pouco de JS para shim globalmente todas as minhas entradas embutidas. Foi um pequeno número de casos, portanto não muito preocupante.

No entanto, eu também adoraria ouvir de alguém que tem a solução "certa" e poderia eliminar meu shim / hack.

Espero que isso ajude e um apoio para você por não explodir em todas as pessoas que ignoraram seu pedido como uma preocupação do Bootstrap 3.

Você pode criar tal formulário onde rótulo e controle de formulário estão do lado usando dois métodos -

1. Layout de formulário embutido

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Layout de formulário horizontal

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Você pode verificar esta página para obter mais informações e demonstração ao vivo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Como isso

DEMO

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Eu tive o mesmo problema, aqui está minha solução:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

aqui está a demonstração

Você deve flutuar à esquerda de todos os elementos assim:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

dê alguma margem para os elementos desejados:

 .form-group { margin-right:5px }

e defina o rótulo com a mesma altura da linha que a altura dos campos:

.form-group label { line-height:--px; }

Você pode ver pelas respostas existentes que a terminologia do Bootstrap é confusa. Se você olhar a documentação do bootstrap, verá que a classe form-horizontal é na verdade para um formulário com campos abaixo uns dos outros, ou seja, o que a maioria das pessoas pensaria como um formulário vertical. A classe correta para um formulário que atravessa a página é formulário embutido . Eles provavelmente introduziram o termo inline porque já haviam usado indevidamente o termo horizontal .

Você vê por algumas das respostas aqui que algumas pessoas estão usando ambas as classes de uma forma! Outros pensam que precisam de formulário horizontal quando na verdade querem formulário embutido .

Sugiro fazer exatamente conforme descrito na documentação do Bootstrap:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Que produz:

Você pode usar uma tag span dentro do rótulo

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Consegui consertar meu problema com. Parece funcionar bem e significa que não tenho que adicionar larguras a todas as minhas entradas manualmente.

.form-inline .form-group input {
 width: auto; 
}

Tenho certeza de que você já teria encontrado sua resposta ... aqui está a solução que deduzi.

Esse é o meu CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

E meu HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Você pode ver o exemplo de trabalho aqui ... http://jsfiddle.net/s6Ujm/

PS: Eu também sou um iniciante, designers profissionais ... sinta-se à vontade para compartilhar seus comentários.

Acho que é isso que você quer, da documentação de bootstrap "Forma horizontal Use as classes de grade predefinidas do Bootstrap para alinhar rótulos e grupos de controles de formulário em um layout horizontal, adicionando .form-horizontal ao formulário. Isso altera .form-groups para comportar-se como linhas de grade, portanto, não há necessidade de .row ". Assim:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Também podemos usá-lo simplesmente como

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Parece que adicionar style="width:inherit;"às entradas funciona bem. demonstração jsfiddle

Não requer CSS. Isso deve ficar bem em sua página. Você pode definir de col-md-*acordo com suas necessidades

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>