html - tamaño - ajustar texto css
Bootstrap de ancho completo de entrada de texto dentro de la forma en línea (3)
Como se indicó en una pregunta similar , intente eliminar instancias de la clase de input-group y vea si eso ayuda.
refiriéndose a bootstrap:
Los controles de formulario individuales reciben automáticamente un estilo global. Todos los elementos textuales y, .form-control se establecen en ancho: 100%; por defecto. Envuelva etiquetas y controles en .form-group para un espaciado óptimo.
Estoy luchando por crear un cuadro de texto que se ajuste a todo el ancho del área de mi contenedor .
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
Cuando hago lo anterior, los dos elementos del formulario están en línea, como espero, pero no ocupan más que unas pocas columnas, en el mejor de los casos. Al pasar el div col-md-12 en firebug muestra que ocupa el ancho completo esperado. Es solo la entrada de texto que no parece llenarse. Incluso traté de agregar un valor de ancho en línea, pero no cambió nada. Sé que esto debería ser simple, solo me siento realmente tonto ahora.
Aquí hay un violín: http://jsfiddle.net/52VtD/4119/embedded/result/
EDITAR:
La respuesta seleccionada es completa en todos los sentidos y una ayuda maravillosa. Es lo que terminé usando. Sin embargo , creo que mi problema inicial fue realmente un problema con la plantilla MVC5 predeterminada en Visual Studio 2013. Contenía esto en Site.css:
input,
select,
textarea {
max-width: 280px;
}
Obviamente, eso impedía que la entrada de texto se expandiera de forma adecuada ... Advertencia justa para futuros usuarios de plantillas de ASP.NET ...
Los documentos de arranque dicen sobre esto :
Requiere anchos personalizados Las entradas, selecciones y áreas de texto tienen un ancho del 100% por defecto en Bootstrap. Para usar la forma en línea, deberá establecer un ancho en los controles de formulario utilizados dentro.
El ancho predeterminado del 100% como todos los elementos del formulario obtiene cuando obtuvieron el form-control clase no se aplica si utiliza la clase form-inline en su formulario.
Puede echar un vistazo a bootstrap.css (o .less, lo que prefiera) donde encontrará esta parte:
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
[...]
}
}
Tal vez deberías echarle un vistazo a input-groups , ya que supongo que tienen exactamente el marcado que quieres usar (violín de trabajo here ):
<div class="row">
<div class="col-lg-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Search</button>
</span>
</div>
</div>
</div>
eche un vistazo a algo como esto:
<form role="form">
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="submit" class="btn">Search</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
</div><!-- /.row -->
</form>