Alinee automáticamente las casillas de verificación en un formulario en línea de arranque
Tengo siguiente código:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input type="checkbox" id="input1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input type="checkbox" id="input2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input type="checkbox" id="input3">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input type="checkbox" id="input4">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input type="checkbox" id="input5">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input type="checkbox" id="input6">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input type="checkbox" id="input7">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input type="checkbox" id="input9">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
(Lamento la mala identificación, pero también publiqué un enlace para bootply). Quiero que las entradas del primer formulario aparezcan dos en cada fila, por lo que debe verse así para el formulario 1
Input1 input2
input3 input4
y
Input5 Input6
Input7 Input8
para el formulario 2 en la segunda columna. Configuré dos columnas, ambas usando la clase col-md-6 y en cada columna estoy colocando los campos. Pero incluso con la configuración de dos subcolumnas de 3, no puedo obtener el resultado que quiero. ¿Qué estoy haciendo mal? estoy usando bootstrap 3
preguntado el 03 de diciembre de 13 a las 13:12
Apostolos
2 Respuestas
Respondido el 03 de diciembre de 13 a las 14:12
Sí, eso es lo que comenté en la publicación anterior. Pero, ¿cómo puedo lidiar con el ajuste de línea? Si una etiqueta de entrada es demasiado grande, se ajustará y la casilla de verificación aparecerá debajo. Si cambio col-md-6 a 7, por ejemplo, todo va con una casilla de verificación en cada columna. ¿Se puede resolver esto, lo que significa que si tengo una casilla de verificación con una etiqueta grande, entonces no la envolverá, ocupará todo el espacio que necesita y luego aparecerán todas las demás casillas de verificación debajo o al lado (si hay suficiente espacio). ¿Tengo algún sentido? - Apóstoles
Una solución es borrar el flotador en cada punto en el que desee comenzar un nuevo bloque. Por ejemplo, así:
<div style="clear:both;"><div></div></div>
Aquí está el código modificado:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input id="input1" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input id="input2" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input id="input3" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input id="input4" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input id="input5" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input id="input6" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input id="input7" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input id="input9" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
Respondido el 03 de diciembre de 13 a las 14:12
Lo siento, agregué un flotador extra claro allí. Eliminé el que estaba antes del segundo formulario. Puedes ver el resultado aquí: bootply.com/98188 - bob johnson
Gracias... Ahora tengo que lidiar con el ajuste de línea (ver comentario en la publicación inferior). El caso es que estoy colocando los campos automáticamente, usando django y un bucle for y estaba buscando un procedimiento automático. - Apóstoles
@Apostolos para que sus etiquetas y entradas aparezcan en la misma línea, querrá cambiar la visualización de la entrada a en línea o en bloque en línea. ¿Es eso lo que quieres decir? - losmescaleros
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas css twitter-bootstrap or haz tu propia pregunta.
¿No querías usar
Input8? - DaveSí editado. Veo dónde me equivoco, configuré la columna en 6 unidades, por lo que para tener dos subcolumnas debo configurarlas en 6 nuevamente. ¿Verdad? - Apostolos
Sí, creo que sí (si entiendo bien) - Dave