Bootstrap多列複選框不排隊

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