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容器来实现这样的设置：”

有关完整说明，请参阅上面的链接。

使用Bootstrap的水平行复选框

1 个答案: