Question

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

.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

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

Answer 1

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

要解决此问题，请使用div而不是label，而是将div内的文本放在.OuterBorder { border: 1px solid black; width: 120px; height: 140px; float: left; } .TopDiv { width: 80px; height:80px; border: 1px solid black; float: left; } #TextDiv { border: 1px solid black; width: 80px; position: absolute; left: 80px; } .TopRightDiv { float: left; } .Minibox { border: 1px solid black; width:20px; } .MiniImg { width: 20px; height: 20px; }内。

有趣的视觉错误与bootstrap形式输入

1 个答案: