Bootstrap 4.0稳定版表单单选框标签格式异常求助

我来帮你排查这个Bootstrap 4表单里单选按钮的格式问题～先看你提供的代码里存在两个关键问题，正是它们导致了显示异常：

问题分析 #

• 错误的嵌套结构：你在外层的form-check-inline里又嵌套了另一个form-check-inline，这违反了Bootstrap的表单组件结构规范，会直接导致布局错乱
• 标签与单选框关联错误：标签的for属性值是handicapped，但对应的单选框id是handicapped-ja，两者不匹配——不仅点击标签无法选中单选框，还会影响样式的正确渲染

修正后的完整代码 #

<!-- 用form-group包裹整个单选组，语义更清晰 -->
<div class="form-group">
  <label class="form-check-label">Test</label>
  <!-- 每个单选选项独立使用form-check-inline实现横向排列 -->
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" value="ja" id="handicapped-ja" name="handicapped">
    <label class="form-check-label" for="handicapped-ja">Ja</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" value="nein" id="handicapped-nein" name="handicapped">
    <label class="form-check-label" for="handicapped-nein">Nein</label>
  </div>
</div>

关键注意事项 #

• 每个单选按钮和它的标签必须放在同一个form-check（纵向排列）或form-check-inline（横向排列）容器内
• 标签的for属性必须和对应单选框的id完全一致，这样既可以实现点击标签选中单选框的交互，也能保证样式正常加载
• 如果不需要横向排列，去掉form-check-inline类即可，单选按钮会默认纵向显示

内容的提问来源于stack exchange，提问作者n1ghty