My goal is to create a horizontal row of checkboxes within a form. I've been able to achieve a functional but unattractive version by using the following code:
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)')
While considering creating a CSS class for spacing between labels and checkboxes, I'm hoping to find a Bootstrap solution that maintains responsiveness. I've experimented with .controls-row and control-group classes, which improve aesthetics but align checkboxes vertically.
UPDATE: I also attempted the solution recommended in a Stack Overflow post linked from another answer. Regrettably, the checkboxes remain vertically aligned.
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)')