Question

我需要对复选框使用<label>包装方法，如下所示：

<div class="form-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="" /> Default checkbox
    </label>
</div>
<div class="form-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="" disabled /> Disabled checkbox
    </label>
</div>

但是，文档仅介绍了兄弟姐妹方法：

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" />
    <label class="form-check-label" for="defaultCheck1"> Default checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled />
    <label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label>
</div>

我知道Bootstrap 4对于某些类的兄弟关系（例如表单验证）更加挑剔。

使用包装标签方法是否存在任何问题？

这似乎对我来说很好，但如果可以避免的话，我不想在6个月内再次进行审查。

Answer 1

如果它对您有用，那么好的。但这不应该这样工作。

引导程序遵循语义清晰的标记。从这个角度来看，他们的文档提出了比您将要使用的更好的“模板”。您之后的每个开发人员都会对您的决定感到困惑，并开始搜索它的含义。
Bootstrap（尤其是bootstrap 4）js组件代码依赖于bootstrap组件应如何位于其父级中。这是一种抽象泄漏。我们应该尝试避免这种情况，而我们的主要方法是一如既往地学习框架的体系结构，并且大多走安全的道路。为了引用输入和标签，BS将使用选择器：找到父.form-check，然后在内部搜索特定内容。在那里，我们可以预料到引导选择器可能会因“高优先级”元素位置而失败。

在bootstrap 4中，是否将复选框包装在支持的标签中？

1 个答案: