Html 网格系统使页脚过度向上延伸到页面顶部

我使用twitter bootstrap 3创建了一个注册表。它看起来像我想要的那样，但是页脚不在它的位置上。我怎样才能把它放在应该放在底部的地方

这是我的“布局”（主模板）：

其中

！=收益率是
/registration
页面内容的占位符。其内容如下：

.col-lg-4.col-lg-offset-4
  .well
    %legend Create your account

    %form{role: :form, action: '/signup', method: :post}
      - if @return_url
        %input{type: :hidden, name: :return_url, value: @return_url}
      .row
        %label.col-xs-4{for: :email} Email
        .col-xs-8
          %input.form-control{id: :email, name: :email, type: :email}
      .row
        %label.col-xs-4{for: :password} Password
        .col-xs-8
          %input.form-control{type: :password, name: :password, id: :password}
      .row
        .col-xs-8.col-lg-offset-4
          %button.btn.btn-primary.btn-block{type: :submit} Create Account
  .clearfix

试着用这样的东西

#footer {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 50px;
   background-color: #111;
}

在添加列之前，您似乎没有在
.container
中添加
。我会先给你一个机会，给你下面的代码

<div class="container">
   <div class="row">
     <div class="col-lg-4 col-lg-offset-3">
       ...
     </div>
   </div>
</div>
<hr>
<footer>
   ...
</footer>

请看一下我的更新，我添加了clearfix和row，但结果仍然是一样的。好吧，clearfix只有在我将其放在“”之外时才有效。然而，也许你知道我能对表单输入做些什么，因为它们在布局和大小上看起来有点难看？在查看更新的代码时，你缺少标签和表单字段周围的
.form group
包装。这就是在引导窗体上提供所有间距的原因。尝试在每组标签和表单字段周围添加
…
。我尝试了不同的变体，它看起来更好，但仍然不是很好。我应该准确地将它们放在哪里：在输入之前、在.col-xs-8之前还是在行之前？通常，这个div应该被包装在标签和输入上，这样它就可以在
.row
之后开始。考虑到您试图布局字段的方式，您也可以尝试仅围绕输入包装它。
<div class="container">
   <div class="row">
     <div class="col-lg-4 col-lg-offset-3">
       ...
     </div>
   </div>
</div>
<hr>
<footer>
   ...
</footer>

<div class="col-lg-4 col-lg-offset-3">
   ...
   <div class="clearfix"></div>
</div>
<hr>
<footer>
   ...
</footer>