html - validacion - ¿Cómo dejo alinear estos elementos de formulario de Bootstrap?
validar formulario html5 (6)
"tire hacia la izquierda" es lo que necesita, parece que está usando Bootstrap 2, no estoy seguro de si está disponible, considere el arranque 3, a menos que sea una gran reelaboración. ... para Bootstrap 3, pero también debe asegurarse de tener 12 columnas en cada fila, de lo contrario tendrá problemas.
Estoy usando Bootstrap por primera vez, y estoy teniendo problemas para alinear esta forma, horizontal hacia la izquierda.
Los elementos de la lista son horizontales, como deberían ser, pero quiero que las etiquetas de control (la clase Bootstrap para las etiquetas de formulario) estén todas en la misma posición flotante a la izquierda.
El formulario está contenido en un div con un lapso de 7, ya que mi sitio es de dos columnas: 7 y 4 columnas.
A continuación está mi HTML. Si busca en "Formularios horizontales" en esta página http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms , verá que las etiquetas están alineadas a la izquierda, pero no están alineadas a la izquierda, por lo que el comienzo de las etiquetas está en la misma posición verticalmente.
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
En lugar de alterar la clase bootstrap css original, crea un nuevo archivo css que anulará el estilo predeterminado.
Asegúrese de incluir el nuevo archivo CSS después de incluir el archivo bootstrap.css.
En el nuevo archivo css do
.form-horizontal .control-label{
text-align:left !important;
}
Estaba teniendo exactamente el mismo problema. Encontré el problema en bootstrap.min.css. Debe cambiar la etiqueta: label {display:inline-block;} para label {display:block;}
Si está diciendo que su problema es cómo alinear las etiquetas del formulario, vea si esto ayuda:
http://jsfiddle.net/panchroma/8gYPQ/
Intenta cambiar el texto-alinea a la izquierda / derecha en el CSS
.form-horizontal .control-label{
/* text-align:right; */
text-align:left;
background-color:#ffa;
}
¡Buena suerte!
Simplemente agregue style="text-align: left" a su etiqueta.
Solo mis dos centavos. Si está utilizando Bootstrap 3, simplemente agregaría un estilo adicional en la hoja de estilos de su sitio que controla el estilo de text-left de la control-label .
Si .form-horizontal .control-label que agregar text-left a la text-left de la etiqueta, de forma predeterminada, hay otro estilo que anula esta .form-horizontal .control-label . Entonces si agregas:
.form-horizontal .control-label.text-left{
text-align: left;
}
Luego, el estilo incorporado de text-left se aplica correctamente a la etiqueta.