Bootstrap-3面板页脚不填充面板

我正在使用响应式Web管理单页面应用程序，我使用的是Bootstrap 3和AngularJS 1.4.8，我创建了一个面板，然后我在该面板中放置了一个表单，在两个按钮的窗体内部的页脚。Bootstrap-3面板页脚不填充面板

我的问题是面板页脚不覆盖/填充面板的长度。

我是否需要将页脚放在form之内，以便按钮可以发送信息，或者如果我将页脚放在form之外，该按钮可以发送信息吗？

我觉得现在的问题是，我创建了一个<div class="col-lg-12"> 把面板的标题，这里面div我创造了另一个<div class="col-lg-6">把面板内容，所以这就是为什么面板页脚不覆盖整个面板。

我试过把页脚放在<div class="col-lg-6">之外，它能工作，但是如果这样做，按钮将会在form之外。这对我来说很重要，就像把按钮放在form之外的一个不好的做法。

这里是我的html代码

<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header">Create User</h1> 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<!-- /.row --> 
<div class="row"> 
    <div class="col-lg-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       Basic Form Elements 
      </div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-lg-6"> 
         <form role="form"> 
          <div class="form-group"> 
           <label>Name:</label> 
           <input class="form-control" placeholder="user name"> 
          </div> 
          <div class="form-group"> 
           <label>Email:</label> 
           <input class="form-control" placeholder="email"> 
          </div> 
          <div class="panel-footer clearfix"> 
           <div class="pull-right"> 
            <button type="reset" class="btn btn-default">Reset</button> 
            <button type="submit" class="btn btn-primary">Send</button> 
           </div> 
          </div> 
         </form> 
        </div> 
        <!-- /.col-lg-6 (nested) --> 
        <!-- /.col-lg-6 (nested) --> 
       </div> 
       <!-- /.row (nested) --> 
      </div> 
      <!-- /.panel-body --> 
     </div> 
     <!-- /.panel --> 
    </div> 
    <!-- /.col-lg-12 --> 
</div> 
<!-- /.row -->

来源

2016-04-28 StackQuestion