ярлык бутстрапа, не совпадающий с флажками

Question

мои флажки сдвинуты вниз и не выровнены по вертикали с его меткой слева.

http://jsfiddle.net/1ppjLyqg/

Примечание: ширина должна быть> 768px, чтобы этот вопрос

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<div class="form-group"> 
 
    <label for="group" class="col-sm-3 text-right">Group*</label> 
 
    <div class="col-sm-9"> 
 
     <input type="number" id="group" min="1" max="20" ng-model="member.group" maxlength="2" ng-required="true" class="form-control" placeholder="1" style="width:75px"> 
 
    </div> 
 
</div> 
 
    
 
<div class="form-group"> 
 
    <label class="col-sm-3 text-right">Office(s)*</label> 
 
    <div class="col-sm-offset-3 col-sm-8 checkbox" id="offices"> 
 
     <label> 
 
      <input type="checkbox" id="inlineCheckbox1" value="0">Office 1</label> 
 
     <label> 
 
      <input type="checkbox" id="inlineCheckbox2" value="1">Office 2</label> 
 
     <label> 
 
      <input type="checkbox" id="inlineCheckbox3" value="2">Office 3</label> 
 
     <label> 
 
      <input type="checkbox" id="inlineCheckbox4" value="3">Office 4</label> 
 
     <label> 
 
      <input type="checkbox" id="inlineCheckbox5" value="4">Office 5</label> 
 
    </div> 
 
</div>

Answer 1

Remove "col-sm-offset-3" от дел. Вы уже даете col-sm-3 для ярлыка.

<div class="form-group"> 
    <label class="col-sm-3 text-right">Office(s)*</label> 
    <div class="col-sm-8 checkbox" id="offices"> 
     <label> 
      <input type="checkbox" id="inlineCheckbox1" value="0">Office 1</label> 
     <label> 
      <input type="checkbox" id="inlineCheckbox2" value="1">Office 2</label> 
     <label> 
      <input type="checkbox" id="inlineCheckbox3" value="2">Office 3</label> 
     <label> 
      <input type="checkbox" id="inlineCheckbox4" value="3">Office 4</label> 
     <label> 
      <input type="checkbox" id="inlineCheckbox5" value="4">Office 5</label> 
    </div> 
</div> 

Также имеется флажок-маркер по начальной загрузке для флажков. Так что если вы хотите, чтобы выровнять его с этикеткой, используйте margin-top:0px;

Демо: http://jsfiddle.net/1ppjLyqg/1/