Bootstrap deux entrées dans le groupe
J'ai suivantes HTML, mais je ne peux pas obtenir deux entrées pour être sur la même ligne que tous les boutons.
<div class="well">
<div class="input-group">
<input class="form-control" placeholder="Page path">
<input class="form-control" placeholder="Name">
<div class="input-group-btn">
<a href="#" class="btn btn-info">View</a>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Delete</a></div>
</div>
</div>
http://www.bootply.com/Iu7Ic99jm6
Vous êtes un peu abuser de l'entrée-le groupe de widget. Bonne chance avec ça. "Nous ne soutenons pas les add-ons multiples sur un seul côté. Nous n'avons pas en charge plusieurs forme-contrôle dans un seul groupe d'entrée." – getbootstrap.com/components/#input-groups
OriginalL'auteur newbie | 2014-07-08
Vous devez vous connecter pour publier un commentaire.
Bootstrap fait la largeur de ces éléments d'entrée de 100%. Vous aurez besoin de remplacer cette valeur. Quelque chose comme ceci:
Voir mon bootply fourche ici:
http://www.bootply.com/ApJNHnX5Lv
.form-control
etc tout au long de l'application. Pourquoi ne pas utiliser l'annotation comme il est destiné à être utilisé dans le bootstrap, au lieu de changer le responsive css de mise en page?Il serait trivial de rendre la règle plus spécifique par l'ajout d'une classe. J'accepte votre réponse est également bon, mais le résultat est différent. J'ai essayé avec ma réponse à donner une idée de ce qui se passait réellement dans la Fpo CSS à se comporter de la façon dont elle était.
Hey @ElwoodP, oui, viens de dire 🙂 Et il n'importe pas si vous n'êtes pas à l'aide de
.form-control
etc d'ailleurs de toute façon.OriginalL'auteur ElwoodP
Place l'ensemble du contenu dans un
.form-inline
<form>
tag, et le lieu de la saisie et le bouton de sections dans.form-group
<div>
's :voir fourchue bootply -> http://www.bootply.com/xSxTb0xzqh
OriginalL'auteur davidkonrad
vous pouvez utiliser
col
divs pour forcer les entrées à dans certains endroits. en combo avecform-inline
/form-group
commeOriginalL'auteur serakfalcon
Essayez d'utiliser la classe
form-inline
Bootply
OriginalL'auteur Nalaka526