html - 两个单独的网格列中的表单元素

Question

我在一个页面上有两个表单。我都希望在双列布局的左列中，但第二种形式的输入字段延伸到第二列。

我当然可以创建两个单独的“行”。但是，该设计要求列的顶部位置具有相同的高度，就像双列布局中通常显示的列一样。

我不认为这与 Bootstrap 有必然关系，因为这可能可以通过其他方法解决，但我想知道 Bootstrap 是否有快速解决此问题的方法

下面的方法显然是不正确的语法并将表单元素移入和移出流程，但这基本上是我想要完成的:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form id="form1">
      </form>
      ...
      <form id="form2">
      <!-- ... #form2 inputs ... -->
    </div>
    <div class="col-md-6">
      <!-- ... #form2 inputs cont'd ... -->

      </form> <!-- end of #form2 -->
    </div>
  </div>
</div>

我已经可以将表格分隔成两行，当然，右列低于左列。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form id="form1">
      </form>
    </div>
  </div> <!-- end of row -->

  <div class="row">
    <form id="form2">
      <div class="col-md-6">
        <!-- ... #form2 inputs ... -->
      </div>
      <div class="col-md-6">
        <!-- ... #form2 inputs cont'd ... -->
      </div>
    </form> <!-- // end of #form2 -->
  </div>
</div>

如果这是 html 的结构，是否有任何技巧可以“折叠”右列上方的空间，或者是否有我缺少的 Bootstrap 方法？如有必要，对非 Bootstrap 方法开放。

Answer 1

您是否考虑过只使用一个表单元素来包装所有表单，然后使用它们的名称属性将两个表单分开？例如:

value="form1[field_name]"
value="form2[field_name]"