使用 Bootstrap 的水平复选框

Question

我正在尝试在表单内制作一排水平复选框。我已经设法得到一个非常丑陋的版本来工作：

div.form-group(ng-show = 'avariable')
    label 1
    input(type = 'checkbox' ng-model='weight' ng-change='weight(1)')
    label 2
    input(type='checkbox' ng-model='weight' ng-change='weight(2)')

我想过编写一个 CSS 类来在标签和复选框之间放置一些间距，但我希望有一个 Bootstrap 解决方案。我需要它来响应。我也玩过 .controls-row 和 control-group 类。它们使东西看起来不错，但复选框垂直对齐。

编辑：我还根据以下答案链接的 SO 帖子尝试了此解决方案。复选框仍然垂直排列。

div.control-group(ng-show = 'questionData.sweighted || questionData.eweighted')
    div.controls.span2
        label.checkbox 1
            input(type = 'checkbox' ng-model='weight' ng-change='weight(1)')
    div.controls.span2
        label.checkbox 2
            input(type = 'checkbox' ng-model='weight' ng-change='weight(2)')
    div.controls.span2
        label.checkbox 3
            input(type = 'checkbox' ng-model='weight' ng-change='weight(3)')

Answer 1

这里之前已经回答过：Twitter Bootstrap - checkbox columns / columns within form

“您可以通过分隔 .control-group 容器中的复选框块而不是像这样每个 .control 容器来实现这样的设置：”

完整的解释请参见上面的链接。