网格系统页脚过多到页面顶部

Question

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

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

.container
  .row
    != yield
    %hr
    != haml :'shared/_footer'

其中!= yield是/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

Answer 1

在添加列之前，您似乎错过了在<div class="row">内添加.container。我先给你一个镜头，给你以下代码。

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

<强>替代地

由于生活中的任何事情都不容易，也可能是你的形式中有一些元素（绝对位置和浮动元素），这些元素在高于div上方的高度计算中没有被计算在内。页脚。

如果是这种情况，请在主<div class="clearfix"></div>的结束标记之前添加div。

结果看起来应该是这样的......

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

Answer 2

尝试使用类似的东西

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