css - filas - ¿Perfecto ancho del 100% del contenedor principal para una entrada de Bootstrap?
padding bootstrap 3 (8)
¿Qué pasa?
input[type="text"] {
max-width:none;
}
Comprobando que algún archivo css está causando problemas. Por defecto, bootstrap se muestra en todo el ancho. Por ejemplo, en el directorio MVC, el contenido es site.css y hay una definición que restringe el ancho.
input,select,textarea {
max-width: 280px;}
¿Cómo puedo hacer que un campo de entrada de Bootstrap sea exactamente el 100% del ancho de su padre?
Como escribió steve-obrien en Bootstrap Issue # 1058 :
La configuración al 100% no funciona cuando se aplica directamente a un campo de entrada, ya que no toma en cuenta el relleno. Así que terminas con el 100% del contenedor más el relleno en el cuadro de entrada, por lo que el cuadro de entrada generalmente se rompe fuera de su contenedor.
Ese boleto ofrece varias soluciones, pero estoy buscando la mejor manera de hacerlo, preferiblemente una clase de CSS ya provista por Bootstrap.
Para cualquiera que busque en Google esto, una sugerencia es eliminar todas las instancias de clase de input-group . Trabajó para mí en una situación similar. Código original:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="input-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</div>
</form>
Nuevo código:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</form>
Para obtener el resultado deseado, debe establecer "box-sizing: border-box" frente al valor predeterminado que es "box-sizing: content-box". Este es precisamente el problema al que se refiere (de MDN):
cuadro de contenido
Este es el valor inicial y predeterminado según lo especificado por el estándar CSS. Las propiedades de ancho y alto se miden incluyendo solo el contenido, pero no el relleno, borde o margen.
caja de frontera
Las propiedades de ancho y alto incluyen el contenido, el relleno y el borde, pero no el margen ".
Referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
La compatibilidad para este CSS es buena.
Si está utilizando la plantilla predeterminada de C # ASP.NET MVC, puede encontrar que site.css anula algunos de los estilos de Bootstraps. Si desea usar Bootstrap, como lo hice, tener M $ anular esto (sin su conocimiento) puede ser una fuente de gran frustración. Sin cargo para eliminar cualquiera de los estilos no deseados ...
/* Set width on the form input elements since they''re 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Simplemente agregue tamaño de caja:
input[type="text"] {
box-sizing: border-box;
}
solo agrega:
width: 100% !important;
Aplicar la clase de input-block-level funciona muy bien para mí, en varios anchos de pantalla. Está definido por Bootstrap en mixins.less siguiente manera:
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
Esto es muy similar al estilo sugerido por ''ensamblador'' en su comentario sobre el número 1058 .