在底部的Bootstrap Form / Page添加填充/空格

Question

我正在使用Bootstrap Form，它在表单底部有重置/提交按钮。当iPhone上的用户点击提交按钮时，屏幕最下方会出现，首先显示Safari图标，然后用户必须第二次点击提交按钮。

以下是表单结尾的代码：

＆＃13;

＆＃13;

<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /container -->


<script src="assets/js/jquery.min.js"></script>

</body>

</html>

＆＃13;

＆＃13;

＆＃13;

这是一个屏幕截图，显示用户点击“提交”按钮之前的样子：

以及您在第一次点击“提交”按钮时看到的内容：

强迫他们第二次点击“提交”按钮。寻找关于在表单/按钮之后添加一些空格/填充以提供更多空间的最佳方法的建议，因此当它们滚动到底部时，他们不必单击两次。

Answer 1

如果你想要额外的间距，你可以为表格

提供50px的边距

.form{
  position: relative;
  margin-bottom: 50px;
}

OR

但不建议这样做。您可以使用bootstrap创建一个可能占用一些默认空间的行。

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

Answer 2

您可以在第一次单击提交按钮后禁用该按钮。以下链接将帮助您了解。

http://getbootstrap.com/css/#buttons-disabled

你必须使用JavaScript。提交表单时， onsubmit 事件会触发。因此，使用该事件来调用JavaScript函数，该函数将提交按钮的CSS类更改为禁用状态，如上面的链接所示。以下链接将帮助您实现这一目标。

Change an element's class with JavaScript