Bootstrap Grid中使用Radio Buttons时列对齐异常问题求助

问题根源 #

列不对齐的核心原因是栅格结构不统一：

• 顶部标题行用col-md-offset-4偏移，但下方选项行的单选框未嵌套正确的.row结构，导致栅格间距计算混乱。
• 包裹单选框的容器不是Bootstrap的.row，列的padding和布局规则未生效，无法和顶部标题列对齐。
• 部分类名存在多余空格，干扰样式计算。

修复后的代码 #

以下是调整后的结构，严格遵循Bootstrap栅格规则，同时支持动态新增/编辑行列：

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Bootstrap Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .row {
        outline: 1px dotted rgba(0, 0, 0, 0.25);
      }

      [class*="col-md"] {
        outline: 1px dotted rgba(0, 0, 0, 0.5);
      }

      .textAlignCenter {
        text-align: center;
      }

      label {
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <form novalidate="novalidate">
      <!-- 主标题行 -->
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>Same/Different Example</label>
          </div>
        </div>
      </div>
      <!-- 选项标题行 -->
      <div class="row">
        <div class="col-md-4"></div> <!-- 与下方label列宽度对应，保证偏移一致 -->
        <div class="col-md-2 textAlignCenter">
          <div class="form-group">
            <label>Very <br>Disinterested </label>
          </div>
        </div>
        <div class="col-md-2 textAlignCenter">
          <div class="form-group">
            <label>Somewhat <br>Disinterested </label>
          </div>
        </div>
        <div class="col-md-2 textAlignCenter">
          <div class="form-group">
            <label>Somewhat <br>Interested </label>
          </div>
        </div>
        <div class="col-md-2 textAlignCenter">
          <div class="form-group">
            <label>Very <br>Interested </label>
          </div>
        </div>
      </div>
      <!-- Travel选项行 -->
      <div class="row">
        <div class="col-md-12">
          <div class="form-group row"> <!-- 内部嵌套row实现栅格布局 -->
            <label class="col-md-4 control-label">Travel</label>
            <div class="col-md-8"> <!-- 与label的col-md-4凑满12列 -->
              <div class="row"> <!-- 单选框列必须放在row内 -->
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="travel" value="Very Disinterested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="travel" value="Somewhat Disinterested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="travel" value="Somewhat Interested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="travel" value="Very Interested">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Fashion选项行 -->
      <div class="row">
        <div class="col-md-12">
          <div class="form-group row">
            <label class="col-md-4 control-label">Fashion</label>
            <div class="col-md-8">
              <div class="row">
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="fashion" value="Very Disinterested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="fashion" value="Somewhat Disinterested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="fashion" value="Somewhat Interested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="fashion" value="Very Interested">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Health & Fitness选项行 -->
      <div class="row">
        <div class="col-md-12">
          <div class="form-group row">
            <label class="col-md-4 control-label">Health & Fitness</label>
            <div class="col-md-8">
              <div class="row">
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="health" value="Very Disinterested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="health" value="Somewhat Disinterested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="health" value="Somewhat Interested">
                </div>
                <div class="form-check col-md-3 textAlignCenter">
                  <input type="radio" name="health" value="Very Interested">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

关键调整点 #

1. 统一栅格结构：顶部选项标题行去掉col-md-offset-4，改用空的col-md-4列，与下方label列宽度匹配，保证对齐。
2. 正确嵌套栅格：每个.form-group内部添加.row，label用col-md-4，单选框容器用col-md-8；单选框列放在.row内，用col-md-3均分空间，确保与顶部标题列宽度一致。
3. 规范类名写法：删除类名中的多余空格，避免样式异常。
4. 补充单选组属性：给单选按钮添加name属性，实现单选功能。

动态扩展说明 #

当前结构支持快速新增/编辑行列：

• 新增选项行：直接复制整个选项行模块，修改label文本和radio的name属性即可。
• 编辑行列：仅需修改对应模块内的label或radio值，结构无需调整，栅格自动保持对齐。

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