html - 使用 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 容器中分隔复选框 block 来实现这样的设置，而不是像这样在每个 .control 容器中分隔:”

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