web-dev-qa-db-fra.com

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

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.

htmlcsstwitter-bootstraptwitter-bootstrap-3
18
Joshua Tall Guy

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>

EXEMPLE MIS À JOUR ICI

20
Josh Crozier

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>
1
user3387318

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.

1
mp31415