Bootstrap 多列复选框未对齐答案

【问题标题】：Bootstrap multi-column checkbox doesn't line upBootstrap 多列复选框未对齐
【发布时间】：2016-08-10 21:35:01
【问题描述】：

我正在尝试使用引导程序创建多列复选框列表。但是第一列中的第一项与其余的不对齐。

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

【问题讨论】：

标签： css twitter-bootstrap knockout.js

【解决方案1】：

您会看到默认的 Bootstrap CSS 正在运行。您可以根据@TSV 覆盖样式，但要注意其他用法中的副作用。或者更新只是 HTML 以与 Bootstrap 配合使用：

<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

【讨论】：

【解决方案2】：

这似乎解决了它

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

【讨论】：

【解决方案3】：

我已经更新jsfiddle:

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

【讨论】：