Bootstrap 3.0: Como ter texto e entrada na mesma linha?

No momento, estou mudando meu site para o Bootstrap 3.0. Estou tendo problemas com a entrada de formulário e formatação de texto. O que funcionou no Bootstrap 2 não funciona no Bootstrap 3.

Como posso obter texto na mesma linha antes e depois de uma entrada de formulário? Limitei-o a um problema com a classe 'form-control' na versão Bootstrap 3 do exemplo.

Como eu faria para obter todo o texto e entrada em uma linha? Eu gostaria que o exemplo do bootstrap 3 se parecesse com o exemplo do bootstrap 2 no jsfiddle.

Exemplo de violino JS

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Atualização: eu mudo o código para isso, mas está tendo problemas com o alinhamento agora. Alguma ideia?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Eu colocaria cada elemento que você deseja embutido em um col-md- * div separado em sua linha. Ou force seus elementos a serem exibidos embutidos. A classe form-control exibe block porque é assim que o bootstrap pensa que deve ser feito.

Direto da documentação http://getbootstrap.com/css/#forms-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-horizontalao formulário (que não precisa ser um <form>). Fazer isso muda .form-groupspara se comportar como linhas de grade, portanto, não há necessidade de .row.

Amostra:

<form class="form-horizontal">
  <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>

O que você precisa é da .form-inlineclasse. Você precisa ter cuidado, porém, com a nova .form.inlineclasse, você deve especificar a largura de cada controle.

Dê uma olhada nisso

Nada disso funcionou para mim, tive que usar .form-control-staticclasse.

http://getbootstrap.com/css/#forms-controls-static

Você pode fazer assim:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Violino

basta dar a mãe de div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

será

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

A maneira como resolvi isso foi simplesmente adicionar uma substituição para todas as minhas caixas de texto no css principal do meu site, da seguinte forma:

.form-control {
    display:initial !important;
}

todos, por favor, verifique o código atualizado, pois temos que usar

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

Obrigado com respeito

No Bootstrap 4 para elemento horizontal, você pode usar .rowcom .col-*-*classes para especificar a largura de seus rótulos e controles. veja este link .

E se você deseja exibir uma série de rótulos, controles de formulário e botões em uma única linha horizontal, você pode usar .form-inlineeste link para obter mais informações

Ou você pode fazer isso:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

Tentei todas as sugestões acima e nenhuma funcionou. Não quero escolher um número fixo de colunas na grade de 12 colunas. Quero o prompt e a entrada logo após, e quero que as colunas se estendam conforme necessário.

Sim, eu sei, isso é contra o que se trata o bootstrap. E você NUNCA deve usar uma mesa. Porque DIV é muito melhor do que mesas. Mas o problema é que tabelas, linhas e células realmente FUNCIONAM.

SIM - EU REALMENTE SEI que existem fanáticos por CSS, e a reação instintiva é nunca, nunca, nunca use TABLE, TR e TD. Sim, eu sei que DIV class = "table" com DIV class = "row" e DIV class = "cell" é muito melhor. Exceto quando não funciona, e há muitos casos. Não acredito que as pessoas devam ignorar cegamente essas situações. Há momentos em que TABLE / TR / TD vai funcionar muito bem, e não há razão para usar uma abordagem mais complicada e mais frágil apenas por ser considerada mais elegante. Um desenvolvedor deve compreender quais são os benefícios das várias abordagens e as compensações, e não há regra absoluta de que os DIVs são melhores.

"Caso em questão - com base nesta discussão, converti alguns tds e trs existentes em divs. 45 minutos mexendo nisso tentando fazer com que tudo se alinhasse um ao lado do outro e desisti. TDs de volta em 10 segundos depois - funciona - imediatamente - em todos os navegadores, nada mais a fazer. Por favor, tente me fazer entender - que justificativa possível você tem para querer que eu o faça de outra maneira! " Consulte [ https://stackoverflow.com/a/4278073/1758051]

E isto: "

O layout deve ser fácil. O fato de haver artigos escritos sobre como obter um layout dinâmico de três colunas com cabeçalho e rodapé em CSS mostra que é um sistema de layout pobre. Claro que você pode fazer isso funcionar, mas existem literalmente centenas de artigos online sobre como fazê-lo. Praticamente não existem tais artigos para um layout semelhante com tabelas porque é patentemente óbvio. Não importa o que você diga contra as tabelas e a favor do CSS, esse único fato desfaz tudo: um layout básico de três colunas em CSS costuma ser chamado de "O Santo Graal". "[ Https://stackoverflow.com/a/4964107/ 1758051]

Ainda estou para ver uma maneira de forçar os DIVs a sempre se alinharem em uma coluna em todas as situações. Eu continuo recebendo exemplos triviais que realmente não geram problemas. "Responsivo" é fornecer uma maneira de nem sempre se alinharem em uma coluna. No entanto, se você realmente deseja uma coluna, pode perder horas tentando fazer o DIV funcionar. Às vezes, você precisa usar a tecnologia apropriada, não importa o que os fanáticos digam.