在对齐列时，在表单引导程序上添加两个标签

Question

我尝试将每个UI / UX规范的表单与表单上的父标签和两个子标签对齐。 Bootstrap有可能吗？

但是我很难对齐我的列是行。这甚至可能吗？或者这些是不允许的嵌套表格？这是我的标记以及与小提琴的链接。

<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/