Bootstrap pleine largeur d'entrée texte dans inline-forme
je lutte pour créer une boîte de texte qui s'adapte à toute la largeur de ma zone container .
<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>
Quand je fais ci-dessus, les deux éléments sont en ligne, que j'attends, mais ne prenez pas plus de quelques colonnes, au mieux. Planant au-dessus du col-md-12 div dans firebugg montre qu'il prend la pleine largeur prévue. C'est juste l'entrée de texte qui ne semble pas remplir. J'ai même essayé d'ajouter une valeur de largeur en ligne, mais ça n'a pas changé. quoi. Je sais que ça devrait être simple, je me sens vraiment stupide maintenant.
voici un violon: http://jsfiddle.net/52VtD/4119/embedded/result /
EDIT:
la réponse choisie est complète dans tous les sens et une aide merveilleuse. C'est ce que j'ai fini de l'utiliser. Toutefois je pense que ma question initiale était en fait un problème avec la valeur par défaut MVC5 modèle dans Visual Studio 2013. Il contenait ceci dans le Site.css:
input,
select,
textarea {
max-width: 280px;
}
de toute évidence, cela empêchait le texte-input de s'étendre de manière appropriée... Avertissement raisonnable pour l'avenir ASP.NET utilisateurs du modèle...
3 réponses
Le "bootstrap" docs dit à propos de ce :
nécessite des entrées de largeurs personnalisées, sélectionne, et les textareas sont 100% large par par défaut dans le Bootstrap. Pour utiliser le formulaire en ligne, vous aurez à définir largeur sur les contrôles de formulaire utilisé à l'intérieur.
la largeur par défaut de 100% comme tous les éléments de formulaire obtient quand ils ont la classe form-control ne s'applique pas si vous utilisez la classe form-inline sur votre formulaire.
regardez le bootstrap.css (ou .moins, quoi que vous préfériez) où vous trouverez cette partie:
.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%;
}
[...]
}
}
peut-être que vous devriez jeter un oeil à input-groups , car je suppose qu'ils ont exactement le markup que vous voulez utiliser (violon de travail ici ):
<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>
regardez quelque chose comme ceci:
<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>
comme indiqué dans une question similaire , essayer de supprimer les instances de la classe input-group et voir si cela aide.
faisant référence à bootstrap:
les contrôles de formulaires individuels reçoivent automatiquement un certain style global. Tous les textes, et des éléments qui .formulaire de contrôle sont fixées à l'width: 100%; par défaut. De l'enrouler et de les contrôles .forme-groupe pour un espacement optimal.