提交按钮太接近表单 - Bootstrap

Question

由于某种原因，表单的提交按钮往往太靠近该字段。我顺便使用Bootstrap。

代码：

<div class="row" >
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form class="form-group" role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
    <input type="email" class="form-control" name="email" value="$email" id="email">
    <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div

该网站在其他网页上都有其他形式，并没有真正出现问题。不知道为什么会发生这种情况。

注意：在按钮修复问题之前关闭<form>，但由于该按钮不再是表单的一部分，因此它不会提交。！

希望找到代码中的错误，而不是在css中修复黑客。

这就是它的外观。

FIX：在代码中，发出<div class="form-group">并在输入按钮之前结束div。固定它。 固定代码，只是来自Google的类似问题：

<div class="row" >
<div class="col-xs-6">
<h3 class="page-header">Contact Email</h3>
<div class="form-group">
<form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
<input type="email" class="form-control" name="email" value="$email" id="email">
</div>
<button type="Submit" class="btn btn-success pull-right">Submit</button>
</form>
</div>

Answer 1

将输入包含在form-group类的元素中。这个课程不可能 你现在拥有的表格本身......

<div class="row">
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
      <div class="form-group">
        <input class="form-control" name="email" value="$email" id="email" type="email">
      </div>
      <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div>

DEMO