Как переместить ярлык слева от флажка в Bootstrap 3?

Есть ли в любом случае, чтобы текст флажка был слева от флажка? Я пробовал и пытался, но не мог заставить его работать.

Я использую

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

Я попытался поместить верхний слой, и это тоже не сработает. Тогда, если я сделаю его пустой галочкой и просто поставлю текст спереди, они не выстроятся в линию.

любая помощь будет действительно оценена.

Ответы

Ответ 1

Стиль бутстрапа будет плавать элементами checkbox слева из-за этого стиля:

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}

Чтобы решить эту проблему, вы можете просто добавить pull-right в класс элемента input:

<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>

Также стоит отметить, что элемент label должен иметь атрибут for, соответствующий атрибуту входного элемента id, например:

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

ОБНОВЛЕНО ПРИМЕР ЗДЕСЬ

Ответ 2

Это должно быть! 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>

Ответ 3

Как насчет этого (примечание left-checkbox class):

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

с css

.left-checkbox label {
    text-align: right;
    float: right;
    font-weight: bold;    
}

.left-checkbox input[type=checkbox] {
    margin-left: 0;
}

Выглядит хорошо для меня.