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

Est-il de toute façon pour obtenir le texte d'une case à cocher pour être sur le côté gauche de la case à cocher? J'ai essayé et essayé, mais ne peux pas le faire fonctionner.

Je suis en utilisant

 <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é en mettant la plage au-dessus et qui ne fonctionne pas, Alors si je le fais, une case vide et vient de mettre le texte en avant, puis ils ne sont pas alignés.

toute aide serait vraiment appréciée.

InformationsquelleAutor Joshua Tall Guy | 2014-03-08

20

Bootstrap style va flotter à la checkbox éléments 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 input de l'élément de classe:
```
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
```
Il est également intéressant de noter qu'une label élément devrait ont un for attribut correspondant à l'élément d'entrée du id attribut, 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>
```
mise à JOUR de l'EXEMPLE ICI
- pour les matchs id, pas de nom
- Bonne prise, mise à jour.
- Il ne fonctionne pas avec le courant de démarrage de la version: 3.3.7. jsfiddle.net/kxcu6vod
InformationsquelleAutor Josh Crozier
1

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>   
```
- C'est sans bootstrap style bien.
- Ouais, j'aurais pensé ainsi, mais si je le fais alors la case disparaît.
- Le JSFiddle fonctionne bien si? Comme c'est étrange...
- Vraiment: jsfiddle.net/mkLqt
InformationsquelleAutor

Comment à ce sujet (note 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;
}

Semble bien pour moi.

InformationsquelleAutor mp31415

-1

Je suis toujours à la recherche de solutions simples en premier.
Un BAISER solution est:

<span style="white-space: nowrap;">Do Not Reverse Import 
    <label>
        <input 
            type="checkbox" 
            name="DoNotReverseImport"    
            value="DoNotReverseImport"   
            OnChange = "OffYouGo('DoNotReverseImport');"   
            title = 'Check if old entries appear first in your import'         
        >
    </label>
</span>

InformationsquelleAutor Jürgen Peter Jerry

Vous devez vous connecter pour publier un commentaire.