Question

我尝试使用bootstrap创建多列复选框列表。但是第一栏中的第一项并没有与其他项目排成一行。

<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

您正在使用默认的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

Answer 2

这似乎解决了这个问题

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

Answer 3

我已更新jsfiddle：

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

Bootstrap多列复选框没有排队

3 个答案: