la pregunta es sobre los formularios de Twitter Bootstrap. ¿Alguien ahora cuál es la forma recomendada de obtener la columna izquierda (con las etiquetas) más ancha que 140px? Es importante que también se vea bien en los dispositivos móviles.Twitter Bootstrap formulario: haga que la columna de la etiqueta sea más amplia
Gracias por sus recomendaciones.
Intenté varias maneras. También para agregar estilos dentro del archivo html, que se veía bien en el escritorio, pero no en los dispositivos móviles.
La solución es cambiar el bootstrap.css (aunque no estoy seguro de si este archivo esta destinada a ser cambiado):
.form-horizontal .control-label {
float: left;
/*original: width: 140px;*/
width: 200px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
/*original: margin-left: 160px;*/
margin-left: 220px;
}
No se olvide de editar
.form-actions {
padding-left: 160px;
}
también en forms.less
Esto debería establecerse como una variable, creo.
He modificado que para mí como tal en forms.less (las dos nuevas variables se establecen en variables.less a continuación):
// Horizontal-specific styles
// --------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
.control-label {
float: left;
// ub was 140px
width: @labelWidth;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
// don't inherit the margin of the parent, in this case .controls
*display: inline-block;
// ub was 20px
*padding-left: @labelPadding;
// ub was 160px
margin-left: @labelWidth + @labelPadding;
*margin-left: 0;
&:first-child {
// ub was 160px
*padding-left: @labelWidth + @labelPadding;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-top: @baseLineHeight/2;
margin-bottom: 0;
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
// ub was 160px
padding-left: @labelWidth + @labelPadding;
}
}
Nunca edite archivos de biblioteca, ya que hace que la actualización y el mantenimiento sean muy difíciles. -1 para esta respuesta. – Mtz
Esta respuesta se relacionó con la respuesta a continuación (que hackeó el ancho del píxel) y contiene una mejora para el arranque, ya que modificó elementos fijos en una variable. La edición que propuse aquí ahora se implementa con @horizontalComponentOffset en la versión de arranque actual. – Urs
Bajé la otra respuesta también por la misma razón, no se preocupe. Mantengo mi punto. Si desea mejorar la otra respuesta, podría haberla editado o comentado. – Mtz
En Bootstrap v2.1.1, la anchura .control-label se define en forms.less así:
.form-horizontal
{
.control-label
{
width: @horizontalComponentOffset - 20;
}
}
Usted podría anular el @horizontalComponentOffset definición variable en el código MENOS de su proyecto después de la importación de arranque de variables.less. Si necesita esto para una página específica, hágalo en MENOS de esa página. De lo contrario, agréguele una importación común, o mejor aún, su propio archivo variables.less que pretende anular las variables predefinidas de Bootstrap.
En lo que respecta al dispositivo móvil, puede usar media queries para obtener un valor diferente de @horizontalComponentOffset para dispositivos móviles, si es necesario.
La edición del archivo CSS de la biblioteca casi nunca es una buena idea, ya que hace que la actualización y el mantenimiento sean una pesadilla. –
+1 Michael Moussa, -1 para la respuesta del afiche. – Mtz
Puede, sin embargo, hacer su propio archivo CSS que anula estos valores. – AlexLordThorsen