html - francais - href https stackpath bootstrapcdn com bootstrap 4.1 1 css bootstrap min css




Comment puis-je déplacer une étiquette à gauche d'une case à cocher dans Bootstrap 3? (2)

Y at-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 l'empan sur le dessus et ça ne marche pas non plus, alors 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.


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>   

Le style Bootstrap fait flotter les éléments de la checkbox à checkbox vers la gauche à cause 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 doit avoir un attribut for correspondant à l'attribut id 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>

EXEMPLE MIS À JOUR ICI





twitter-bootstrap-3