html - 对齐列时在表单 Bootstrap 上添加两个标签

Question

我正在尝试根据我的 UI/UX 规范对齐一个表单，使其看起来像这样，在表单上有一个父标签，然后是两个子标签。这可以用 Bootstrap 实现吗？

但我很难将列与行对齐。这可能吗？还是这些嵌套形式是不允许的？这是我的标记以及指向 fiddle 的链接。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Parent Label</label>
    <div class="col-sm-8">
      <div class="row">
        <label class="control-label">Sub Label 1</label>
        <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
      </div>
      <div class="row">
        <label class="control-label">Sub Label 2</label>
        <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
      </div>
    </div>
  </div>
</form>

https://jsfiddle.net/xue2vfde/

Answer 1

我不想在输入字段上很好地对齐我的列。在我将输入包装在一个列 div 中之后，我就可以开始了!

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Parent Label</label>
    <div class="col-sm-8">
      <div class="row">
        <label class="col-sm-2 control-label">Sub Label 1</label>
        <div class = "col-sm-6">
                <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
        </div>
      </div>
      <div class="row">
        <label class="col-sm-2 control-label">Sub Label 2</label>
        <div class = "col-sm-6">
                <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
        </div>

      </div>
    </div>
  </div>
</form>

https://jsfiddle.net/xue2vfde/4/