Question

我正在使用twitter bootstrap，特别是表单和模态。我的主要形式是在模态体内，但提交按钮需要在模态页脚中。这意味着我必须关闭一个div并在表单中打开一个新的，如下所示。

<div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </form>
                </div>

作为参考，这是模态的样子：

我很好奇这是否是正确的做法，或者还有另一种方式应该接近（我只能想到的是在模态体标签之外的表格标签）。

Answer 1

移动<form>标记，使其包含整个modal-body div。

请勿使用不正确的标记嵌套。

<form>
  <div class="modal-body">    
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</form>

Answer 2

只需移动内部的<div class="modal-body">和表单外的</form>：

                    <form>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                           </div>
                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                           <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </form>

关闭div之后结束表格，不好的做法？

2 个答案: