Выровняйте метку слева от Bootstrap Toggle

Question

Я использую переключатель начальной загрузки для создания переключателей следующим образом:

<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-toggle="toggle" checked="checked" />
            Toggle Text Right
        </label>
    </div>

    <div class="checkbox">
        <label>
            Toggle Text Left
            <input type="checkbox" data-toggle="toggle" />
        </label>
    </div>
</form>

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

http://jsfiddle.net/sjxd1vpt/2/

Answer 1

Для достижения эффекта следует использовать начальные оболочки container-fluid.

<form>
<div class="checkbox container-fluid" >
    <label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
        Toggle Text Right
    </label>
</div>

<div class="checkbox container">
    <label>
        Toggle Text Left

    </label>
    <input type="checkbox" data-toggle="toggle" />
</div>

Answer 2

Похоже, что css загрузочного переключателя имеет левое поле: -20px;

Просто добавьте пользовательский класс к желаемой левой метке, например, так.

.left .toggle {
  margin-left: 5px;
}

Это сохранитструктура Bootstrap-Toggle ожидает в случае, если к ним привязаны стили, такие как:

label input {
  // some input targeted styling
}

http://jsfiddle.net/sjxd1vpt/5/

Answer 3

Или, если вам не нужен тег метки, вы можете использовать диапазон.

<form>
<div class="checkbox">
    <input type="checkbox" data-toggle="toggle" checked="checked" />
    <span>
        Toggle Text Right
    </span>
</div>

<div class="checkbox">
    <span>
        Toggle Text Left
    </span>
    <input type="checkbox" data-toggle="toggle" />
</div>

Answer 4

Ваш тег метки должен быть закрыт перед тегом ввода.

<form>
    <div class="checkbox">
        <label> Toggle Text Right </label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
    </div>

    <div class="checkbox">
        <label> Toggle Text Left </label>
        <input type="checkbox" data-toggle="toggle" />
    </div>
</form>

Это должно препятствовать наложению кнопки переключения на текст.

Здесь: http://jsfiddle.net/sjxd1vpt/4/