Existe-t-il de toute façon que le texte d'une case à cocher soit sur le côté gauche de la case à cocher? J'ai essayé et essayé mais je ne peux pas le faire fonctionner.
J'utilise
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox style-2 " checked="checked">
<span>Text goes here</span>
</label>
</div>
J'ai essayé de mettre la portée sur le dessus et cela ne fonctionne pas non plus, puis si je fais une case à cocher vide et que je mets juste du texte devant, ils ne s'alignent pas.
toute aide sera grandement appréciée.
Le style bootstrap fait flotter les éléments checkbox
vers la gauche en raison de ce style:
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
Pour résoudre ce problème, vous pouvez simplement ajouter pull-right
à la classe de l'élément input
:
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
Il convient également de noter qu'un élément label
devrait possède un attribut for
correspondant à l'attribut id
de l'élément d'entrée, comme ceci:
<div class="checkbox">
<label for="checkbox1">
<span>Text goes here</span>
</label>
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
</div>
Cela devrait le faire! JSFiddle
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<span>Text goes here</span>
<input type="checkbox" class="checkbox style-2 " checked="checked">
</label>
</div>
Que diriez-vous de cela (notez left-checkbox
classe):
<div class="form-group">
<div class="col-xs-4">
<div class="checkbox left-checkbox">
<label>
Text goes here
</label>
</div>
</div>
<div class="col-xs-8">
<div class="checkbox left-checkbox">
<input type="checkbox">
</div>
</div>
</div>
avec css
.left-checkbox label {
text-align: right;
float: right;
font-weight: bold;
}
.left-checkbox input[type=checkbox] {
margin-left: 0;
}
Ça me va bien.