引导表单输入的有趣视觉错误答案

【问题标题】：Interesting visual bug with bootstrap form inputs引导表单输入的有趣视觉错误
【发布时间】：2017-08-31 20:43:30
【问题描述】：

我正在使用引导程序表单。在表单组中，我有一些复选框。当我将鼠标悬停在第一个上时，它会按预期突出显示第一个。当我将鼠标悬停在第二个上时，它会突出显示 第二个 和 第一个。当我将鼠标悬停在第三个上时，它会突出显示 第三个 和 第一个。等等......我想知道这是否是引导程序的已知错误？我在快递服务器上使用 nodeJS 和哈巴狗。她是我的代码：

.form-group.centerCheckboxes
    label Local Center Statistics
        .form-check
            label.form-check-label
                input#tutorRequestFrequency.form-check-input(type='checkbox' value='tutorRequestFrequency')
                |  Tutor request frequency
        .form-check
            label.form-check-label
                input#totalWorkingHours.form-check-input(type='checkbox' value='totalWorkingHours')
                |  Total working hours
        .form-check
            label.form-check-label
                input#totalHoursTutored.form-check-input(type='checkbox' value='totalHoursTutored')
                |  Total hours tutored
        .form-check
            label.form-check-label
                input#totalWeightPulled.form-check-input(type='checkbox' value='totalWeightPulled')
                |  Tutors "weight pulled" ratios

也许我使用错误的引导类？这一切都在网格系统中，但我已经三次检查网格以确保所有数字行和列都被正确使用。有没有人听说过这个问题或知道为什么会这样？

【问题讨论】：

标签： node.js twitter-bootstrap express pug

【解决方案1】：

我发现了问题。这是因为我错误地使用了label 标签。当我将鼠标悬停在 .form-group 内的任何内容上时，它也悬停在 label 上，该 label 会自动应用于列表中的第一个复选框。

为了解决这个问题，我没有使用label，而是使用div，然后将原来在label 中的文本放在div 中。

【讨论】：