Bootstrap 3.0: ¿Cómo tener texto y entrada en la misma línea?

Actualmente estoy cambiando mi sitio web a Bootstrap 3.0. Tengo un problema con la entrada de formularios y el formato de texto. Lo que funcionó en Bootstrap 2 no funciona en Bootstrap 3.

¿Cómo puedo obtener texto en la misma línea antes y después de la entrada de un formulario? Lo he reducido a un problema con la clase "control de formulario" en la versión Bootstrap 3 del ejemplo.

¿Cómo haría para obtener todo el texto y la entrada en una línea? Me gustaría que el ejemplo de bootstrap 3 se pareciera al ejemplo de bootstrap 2 en jsfiddle.

Ejemplo de JS fiddle

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

Actualización: cambio el código a este que funciona pero ahora tengo problemas con la alineación. ¿Algunas ideas?

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

Pondría cada elemento que desee en línea dentro de un col-md- * div separado dentro de su fila. O fuerce sus elementos para que se muestren en línea. La clase de control de formulario muestra el bloque porque esa es la forma en que bootstrap cree que debería hacerse.

Directamente de la documentación http://getbootstrap.com/css/#forms-horizontal .

Use las clases de cuadrícula predefinidas de Bootstrap para alinear etiquetas y grupos de controles de formulario en un diseño horizontal agregando .form-horizontalal formulario (que no tiene que ser a <form>). Al hacerlo, cambia .form-groupspara comportarse como filas de cuadrícula, por lo que no es necesario .row.

Muestra:

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

Lo que necesitas es la .form-inlineclase. Sin embargo, debe tener cuidado, con la nueva .form.inlineclase debe especificar el ancho para cada control.

Echa un vistazo a esto

Ninguno de estos funcionó para mí, tuve que usar la .form-control-staticclase.

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

Puedes hacerlo así:

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

Violín

solo dale a la madre 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>

La forma en que lo resolví fue simplemente agregar una anulación para todos mis cuadros de texto en el CSS principal de mi sitio, así:

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

todos, por favor verifique el código actualizado ya que tenemos que usar

 form-control-static not only form-control

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

Gracias con saludos

En Bootstrap 4 para elemento horizontal, puede usar .rowcon .col-*-*clases para especificar el ancho de sus etiquetas y controles. ver este enlace .

Y si desea mostrar una serie de etiquetas, controles de formulario y botones en una sola fila horizontal, puede usar .form-inlineeste enlace para obtener más información .

O puedes hacer esto:

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

Probé cada una de las sugerencias anteriores y ninguna funcionó. No quiero elegir un número fijo de columnas en la cuadrícula de 12 columnas. Quiero el mensaje y la entrada justo después de él, y quiero que las columnas se estiren según sea necesario.

Sí, lo sé, eso va en contra de lo que se trata el bootstrap. Y NUNCA debes usar una mesa. Porque DIV es mucho mejor que las tablas. Pero el problema es que las tablas, filas y celdas realmente FUNCIONAN.

SÍ - REALMENTE SÉ que hay fanáticos de CSS, y la reacción instintiva es nunca, nunca usar TABLE, TR y TD. Sí, sé que DIV class = "table" con DIV class = "row" y DIV class = "cell" es mucho mejor. Excepto cuando no funciona, y hay muchos casos. No creo que la gente deba ignorar ciegamente esas situaciones. A veces, el TABLE / TR / TD funcionará bien, y no hay razón para usar un enfoque más complicado y frágil solo porque se considera más elegante. Un desarrollador debe comprender cuáles son los beneficios de los diversos enfoques y las compensaciones, y no existe una regla absoluta de que los DIV sean mejores.

"Caso en cuestión: en base a esta discusión, convertí algunos tds y trs existentes en divs. 45 minutos jugando con eso tratando de que todo se alineara uno al lado del otro y me di por vencido. Los TD regresaron 10 segundos después - funciona - de inmediato - en todos los navegadores, nada más que hacer. Por favor, intente hacerme entender - ¡qué posible justificación tiene para querer que lo haga de otra manera! " Ver [ https://stackoverflow.com/a/4278073/1758051]

Y esto: "

El diseño debe ser sencillo. El hecho de que haya artículos escritos sobre cómo lograr un diseño dinámico de tres columnas con encabezado y pie de página en CSS muestra que es un sistema de diseño deficiente. Por supuesto, puede hacer que funcione, pero hay literalmente cientos de artículos en línea sobre cómo hacerlo. Prácticamente no existen artículos de este tipo para un diseño similar con tablas porque es claramente obvio. No importa lo que diga en contra de las tablas y a favor de CSS, este hecho lo deshace todo: un diseño básico de tres columnas en CSS a menudo se llama "El Santo Grial". "[ Https://stackoverflow.com/a/4964107/ 1758051]

Todavía tengo que ver una forma de obligar a los DIV a que siempre se alineen en una columna en todas las situaciones. Me siguen mostrando ejemplos triviales que realmente no generan problemas. "Responsive" se trata de proporcionar una forma de que no siempre se alineen en una columna. Sin embargo, si realmente desea una columna, puede perder horas tratando de que DIV funcione. A veces, es necesario utilizar la tecnología adecuada sin importar lo que digan los fanáticos.