Question

我正在尝试构建一个2列的页面发布到2个不同的操作。但是展示位置应该如下：

+----------------+ +-----------------+
|                | |                 |
|                | |  Should post to |
| Should post to | |  Form1          |
| Form1          | |                 |
|                | |                 |
|                | |                 |
|                | |                 |
|                | +-----------------+
|                | +-----------------+
|                | |Should post to   |
|                | |Form2            |
|                | |                 |
|                | |                 |
|                | |                 |
+----------------+ +-----------------+
+--------+         +------+
|Submit  |         |Submit|
|Form1   |         |Form2 |
+--------+         +------+

现在没有form2，因为在使用常规bootstrap网格时，我无法将其放置在适当的位置。我该如何设计页面？我应该如何用表单标签包装输入和div？

编辑：当前状态如下。正如我所说，我还不能放置form2 ..

<div class="row">
    <div class="col-md-12">

        <form action="/form1">
            <div class="col-md-6">

                <!-- bootstrap input groups for form 1 //-->

                <div class="form-group">
                    <div class="col-lg-9 col-lg-offset-3">
                        <button type="submit" id="bbtn" class="btn btn-success">first form submit</button>                        
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">@Localize("AdditionalProductInfo")</div>
                    <div class="panel-body">
                        <!-- bootstrap input groups for form 1 continued.. //-->
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

您可以使用HTML5 form属性将元素链接到表单外部的表单。

对于结构：

<div class="row">
  <div class="col-xs-6">
    <form id="form1" class="well well-lg">
      <div class="form-group">
        <label for="exampleInputName">First Name</label>
        <input type="name" class="form-control" id="exampleInputName" placeholder="First Name">
      </div>
      <div class="form-group">
        <label for="exampleInputLastName">Last Name</label>
        <input type="lastname" class="form-control" id="exampleInputLastName" placeholder="Last Name">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
  <div class="col-xs-6">
    <div class="well well-lg">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" form="form1">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" form="form1">
      </div>
    </div>
    <form class="well well-lg">
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox">Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

以下是Demo

使用带引导程序的多个列的多个表单

1 个答案: