Bootstrap left align checkbox в горизонтальной форме

Question

Я использую Bootstrap 3.3.7. У меня есть горизонтальный вид с этикеткой менее флажком, как это:

<div class="container-fluid" style="max-width:600px"> 
    <form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="field1">Field 1:</label> 
     <div class="col-sm-8"> 
     <input class="form-control" type="text" id="field1"/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="field2">Field 2:</label> 
     <div class="col-sm-8"> 
     <input class="form-control" type="text" id="field2"/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="field3">Field 3:</label> 
     <div class="col-sm-8"> 
     <!-- HERE IS THE CHECKBOX: --> 
     <input class="form-control" type="checkbox" id="field3"/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-8"> 
     <button class="btn btn-default btn-primary" type="submit">Apply Changes</button> 
     </div> 
    </div> 
    </form> 
</div> 

Я создал Bootply demo here.

Проблема заключается в том, что флажок находится по центру. Я хотел, чтобы он был выровнен по левому краю, поэтому левый край выравнивается с левым краем текстовых входов над ним.

Как это сделать?

Я пробовал:

• Добавление класса text-left в DIV, который содержит флажок (результат: нет эффекта).
• Удаление спецификаторов ширины сетки из флажка div (результат: он просто заканчивается на следующей строке).
• Включая ввод флажка в теге label, дикая догадка после чтения this post (результат: он исчезает).
• Случайные ручные перестановки дивов (результат: сокрушение духа, git checkout для возврата изменений).

У меня нет идей.

Answer 1

Вы можете добавить класс флажком? Попробуйте это:

<input class="form-control move-left" type="checkbox" id="field3"> 

.move-left { 
    width: auto; 
    box-shadow: none; 
    } 

Демо: http://www.bootply.com/At8YVfnm5F

Обновлено согласно комментарий круговорота в.

Answer 2

Попробуйте изменить класс div, в котором установлен ваш флажок с col-sm-8 по номеру col-sm-1, а затем добавлен класс checkbox-inline к вашему элементу ввода.

Демо:http://www.bootply.com/kjF1gVtWDC

<div class="col-sm-1"> 
    <!-- HERE IS THE CHECKBOX: --> 
    <input class="form-control checkbox-inline" type="checkbox" id="field3" /> 
</div> 

Answer 3

Вы можете изменить ширину первоначальной или авто для ввода идентификатора LiveOnBootplay

input#field3 { 
    width: auto; 
    }