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方法？如有必要，打开非引导方法。

Answer 1

Have you considered using just one form element to wrap the whole lot, and then separating the two forms using their name attributes? For example:

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

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

1 个答案: