Bootstrap gauche de la case à cocher aligner à l'horizontale forme
Je suis en utilisant Bootstrap 3.3.7. J'ai une forme horizontale avec une étiquette de moins de case à cocher, comme ceci:
<div class="container-fluid" style="max-width:600px">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="field1">Field 1:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field1"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field2">Field 2:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field2"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field3">Field 3:</label>
<div class="col-sm-8">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control" type="checkbox" id="field3"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
</div>
</div>
</form>
</div>
J'ai créé un Bootply démo ici.
Le problème est la case à cocher est centré. Je voulais qu'il soit aligné à gauche, de sorte que le bord gauche est aligné avec le bord gauche du texte les entrées ci-dessus.
Comment dois-je faire?
J'ai essayé:
- Ajout de la classe de
text-left
à la div qui contient la case à cocher (résultat: pas d'effet). - Retrait de la largeur de la grille des spécificateurs de la case à cocher div (résultat: elle se termine juste en haut sur la ligne suivante).
- Entourant la case d'entrée dans un
label
balise, un sauvage suppose qu'après la lecture de ce post (résultat: il disparaît). - Aléatoire de la main-wavey réarrangements de divs (résultat: esprit écrasé, git checkout pour annuler les modifications apportées).
Je suis à court d'idées.
OriginalL'auteur Jason C | 2016-12-10
Vous devez vous connecter pour publier un commentaire.
Pouvez-vous ajouter une classe à la case? Essayez ceci:
Démo: http://www.bootply.com/At8YVfnm5F
Mis à jour comme par gyre du commentaire.
Aussi (merci gyre), l'ajout de la
checkbox-inline
classe sur le dessus de cela corrige l'alignement vertical.super, content que cela a aidé. N'étais pas au courant de la case à cocher en ligne, c'est pratique
Une autre chose:
width: auto
serait plus flexible de choix.OriginalL'auteur sol
Vous pouvez modifier la largeur initiale ou automatique pour l'entrée de l'id de LiveOnBootplay
OriginalL'auteur Mostafa Baezid
Essayez de changer la classe de la div en joignant votre case de
col-sm-8
àcol-sm-1
puis ajouté une classe decheckbox-inline
à votre élément de saisie.Démo: http://www.bootply.com/kjF1gVtWDC
L'alignement vertical arrêt est provoqué par
margin: 4px 0 0;
- c'est de jouer avec votre violon, pourrait modifier ses propriétés css dans la console développeur. et la hauteur de la ligne.Cool, réglage
margin:0
des correctifs. De ce fait le travail. Je vais donner quelques minutes pour voir si quelqu'un a des suggestions pour les cas avec plus de conteneurs parents avant que je l'accepte.Je suis un "programme d'amorçage" moi-même. Je ne veux pas tirer de cette réponse, mais si je peux aider, je vais certainement être heureux de vous aider. Je ne suis pas sur ma machine de travail dès maintenant.
Notez que vous pouvez appliquer une classe de
checkbox-inline
à l'entrée pour obtenir le même effet.OriginalL'auteur gyre