时间戳

首页 > 解决方案 > 两个单独的网格列中的表单元素

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

问题描述

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

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

我不相信这一定与 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 方法？如有必要，可使用非引导方法。

标签： htmlcsstwitter-bootstrap

解决方案

您是否考虑过仅使用一个表单元素来包装整个表单，然后使用它们的名称属性分隔两个表单？例如：

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

推荐阅读