ブートストラップマルチカラムチェックボックスが並んでいません

Question

ブートストラップを使用してマルチカラムチェックボックスリストを作成しようとしています。しかし、最初の列の最初の項目は残りの部分と並んでいません。

コード：http://jsfiddle.net/04pgkkfv/1/

<div class="row"> 
    <ul class="list-group row" data-bind="foreach: availableProgramIndexes"> 
    <li class="checkbox list-group-item col-sm-2"> 
     <label> 
     <input type="checkbox" data-bind="value: $data" /><span data-bind="text: $data"></span></label> 
    </li> 
    </ul> 
</div> 

$(document).ready(function() { 
    var BaseVM = function() { 
    var that = {}; 
    return that; 
    }; 

    var TestVM = function() { 
    var that = BaseVM(); 

    that.availableProgramIndexes = ko.observableArray([]); 
    return that; 
    }; 

    var vm = TestVM(); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    vm.availableProgramIndexes.push('123 456'); 
    ko.applyBindings(vm); 
}); 

Answer 1

あなたがアクションでデフォルトのブートストラップCSSを見ています。 @TSVごとにスタイルをオーバーライドするか、他の用途では副作用がないか注意してください。またはブートストラップで素晴らしいプレーするだけ HTMLを更新：

<li class="list-group-item col-sm-2"> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" data-bind="value: $data" /> 
     <span data-bind="text: $data"></span> 
    </label> 
    </div> 
</li> 

Fiddle

Answer 2

これは

ul.row { 
    margin:-10px auto auto auto; 
} 

Answer 3

それを修正するようだ私はjsfiddleを更新しました：

.checkbox.list-group-item { 
    margin: 0; 
    margin-top: 0; 
}