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

89

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>

fantasma gordo
fuente
Ambos son iguales, solo tiene una clase adicional form-controlen su ejemplo de bootstrap 3.
Kyle Needham
1
Eche un vistazo al ejemplo en los documentos de arranque. Le faltan clases en la etiqueta getbootstrap.com/css/#forms-horizontal
bumperbox
Lo siento pero sigo confundido. El ejemplo inferior (BS3) tiene la clase 'control de forma' que le da una mejor apariencia. Quiero una mejor apariencia Y mantener el texto y la entrada en la misma línea. ¿Qué me estoy perdiendo?
fat fantasma
Déjame hacerte la pregunta de otra manera. ¿Cómo obtendría el texto y los campos de entrada en la misma línea y alineados en columnas agradables? Vea este violín jsfiddle.net/fatfantasma/QwkpE . Por supuesto, me gustaría agregar texto en el extremo derecho de la misma línea. ¿Como podría hacerlo?
fat fantasma
.input-lgaumenta la altura del campo de entrada, pero también necesitamos una clase para ajustar la altura y el tamaño de la etiqueta.
Petrus Theron

Respuestas:

39

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.

lomteslie
fuente
136

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>
Denis Besic
fuente
15
+1. Esta debería ser la respuesta aceptada, ya que vincula la documentación oficial
EProgrammerNotFound
es una respuesta de solo enlace, y no debe ser la aceptada sin un ejemplo, en caso de que la página a la que se hace referencia cambie o se elimine.
NDM
¿Por qué la respuesta correcta es la respuesta correcta? esta debe ser la respuesta correcta! @fat fantasma
JMASTER B
Debería envolverlos en un formulario-control-static, vea las respuestas a continuación
rmcsharry
2
@Whitecat que está diseñado en un diseño receptivo: para que funcione también en dispositivos móviles, use col-xs- * en lugar de col-sm- *
niico
23

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

Reza Shirazian
fuente
esta debería ser una mejor respuesta que la clase form-horizontalporque no forzó a div con clases form-groupen bloque.
shawmzhu
Esto solo se aplica a los formularios dentro de las ventanas gráficas que tienen al menos 768 px de ancho.
rmcsharry
13

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

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

hakunin
fuente
1
Esto realmente ayudó. Sin esto, el texto de la etiqueta y el texto de entrada no estaban alineados con col- -
Brendan Cody-Kenny
Esta debería ser la respuesta correcta, especialmente si desea que su formulario se
ajuste
Sí, esto también funciona para mí. Otras soluciones fallan para columnas col-xs- *. El uso de 'form-control-static text-right' funcionó para mí en BS 3.3.7.
Neutrino
10

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

Paulo Fidalgo
fuente
4

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>
bienvenido
fuente
3

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;
}
Hugo Nava Kopp
fuente
1
¿Qué hace esto?
AgilePro
0

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 .

Liam
fuente
La pregunta establece específicamente Bootstrap 3.
blupointmedia
1
Tuve los mismos problemas con bootstrap 4 y lo publiqué para ayudar a otra persona
Liam
-2

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.

AgilePro
fuente
2
Las tablas no responden.
Pedro Moreira
Todo el mundo sabe que las tablas no se reformatean a sí mismas en no tablas. Pero si lo que necesitas es una fila, SIEMPRE queda fila. Simplemente no puede hacer cumplir esto con etiquetas DIV. La gente actúa como si siempre quisieras tener capacidad de respuesta, pero lo que estás haciendo confunde "la mayor parte del tiempo" con "todo el tiempo". En el momento de redactar este informe, esta respuesta tiene dos votos en contra. Si está de acuerdo con mi punto aquí, que a veces solo necesita un TR, hágale saber a los demás también.
AgilePro
Tiene derecho a tener su propia opinión, pero creo que el consenso general es que nunca debe usar tablas para cualquier otra cosa que muestre datos tabulares. Las tablas son demasiado limitadas en cuanto a lo que pueden hacer y lo personalizables que son. Si aún necesita darle a los divs la capacidad de fluir como filas y columnas de tablas, eche un vistazo a flex: css-tricks.com/snippets/css/a-guide-to-flexbox
Pedro Moreira