网格系统使页脚过多地到达页面顶部答案

【问题标题】：Grid system made footer go too much up to the top of a page网格系统使页脚过多地到达页面顶部
【发布时间】：2014-03-11 02:45:21
【问题描述】：

我使用 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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 haml

【解决方案1】：

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

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

或者

由于生活中没有什么是容易的，也可能是您的表单中有一些元素（位置绝对元素和浮动元素）未计入页脚上方div 的高度计算中。

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

结果应该是这样的..

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

【讨论】：

请看一下我的更新，我添加了clearfix和row，但结果还是一样。
好吧，clearfix 只有在我将它放在“
”之外时才有效。但是，也许您知道我可以对表单输入他们自己做些什么，因为它们在布局和大小方面看起来有点难看？
在查看更新后的代码时，您缺少标签和表单字段周围的 .form-group 包装器。这就是在 Bootstrap 表单上提供所有间距的原因。尝试在每组标签和表单字段周围添加<div class="form-group">...</div>。
我尝试了不同的变体，它看起来更好但仍然不是很好。我应该把它们放在哪里：就在输入之前，在 .col-xs-8 之前还是在行之前？
一般来说，这个 div 应该包裹在标签和输入的周围，这样它就可以在.row 之后开始。考虑到您尝试布局字段的方式，您也可以尝试仅将其包装在输入周围。

【解决方案2】：

尝试使用类似的东西

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

【讨论】：