提交按钮太接近表单 - 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中修复hack.

这是它的外观.

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