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.
<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>
html
formatting
twitter-bootstrap-3
fantasma gordo
fuente
fuente
form-control
en su ejemplo de bootstrap 3..input-lg
aumenta la altura del campo de entrada, pero también necesitamos una clase para ajustar la altura y el tamaño de la etiqueta.Respuestas:
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.
fuente
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-horizontal
al formulario (que no tiene que ser a<form>
). Al hacerlo, cambia.form-groups
para comportarse como filas de cuadrícula, por lo que no es necesario.row
.Muestra:
fuente
Lo que necesitas es la
.form-inline
clase. Sin embargo, debe tener cuidado, con la nueva.form.inline
clase debe especificar el ancho para cada control.Echa un vistazo a esto
fuente
form-horizontal
porque no forzó a div con clasesform-group
en bloque.Ninguno de estos funcionó para mí, tuve que usar la
.form-control-static
clase.http://getbootstrap.com/css/#forms-controls-static
fuente
Puedes hacerlo así:
Violín
fuente
solo dale a la madre de div "class =" col-lg-12 ""
será
fuente
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í:
fuente
todos, por favor verifique el código actualizado ya que tenemos que usar
http://jsfiddle.net/tusharD/58LCQ/34/
Gracias con saludos
fuente
En Bootstrap 4 para elemento horizontal, puede usar
.row
con.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-inline
este enlace para obtener más información .fuente
O puedes hacer esto:
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.
fuente