Question

我有带有bootstrap 2.1.0的Rails应用程序（我使用twitter-bootstrap-rails gem）。但我不能得到工作页脚。除非我向下滚动页面，否则它不可见。我无法解决这个问题。

Application.html.haml

!!!
%html
  %head
    %title MyApp
    = stylesheet_link_tag    "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
    %meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0"  }
  %body
    %div{ :class => "wrapper" }
      = render 'layouts/navbar_template'

      %div{ :class => "container-fluid" }
        - flash.each do |key, value|
          = content_tag( :div, value, :class => "alert alert-#{key}" )
        %div{ :class => "row-fluid" }
          %div{:class => "span10"}
            =yield
          %div{:class => "span2"}
            %h2 Test sidebar

    %footer{ :class => "footer" }
      = debug(params) if Rails.env.development?

bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";
body { 
    padding-top: 60px;
}

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not 
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: '/assets/fontawesome-webfont.eot';
@fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff';
@fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf';
@fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg';

// Font Awesome
@import "fontawesome";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

//MY CSS IS HERE.
html, body {
    height: 100%;
}
footer {
    color: #666;
    background: #F5F5F5;
    padding: 17px 0 18px 0;
    border-top: 1px solid #000;
}
footer a {
    color: #999;
}
footer a:hover {
    color: #efefef;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 10px;
    margin-bottom: -10px;
}

Answer 1

检查此页面和源代码可能会有所帮助

http://www.martinbean.co.uk/bootstrap/sticky-footer/

还查看了这里的讨论，他们建议了一种粘贴页脚的方法

https://github.com/twitter/bootstrap/issues/306

Answer 2

尝试将以下css添加到您的页脚。 “固定位置”将在同一位置显示您的页脚，无论用户在页面上滚动到何处。 “底部0”将使页脚沿着屏幕底部齐平。

position: fixed;
bottom:0;

希望这有帮助！：）

Rails 3和Bootstrap 2.1.0 - 无法修复我的页脚

2 个答案: