0

我有带有引导程序 2.1.0 的 Rails 应用程序(twitter-bootstrap-rails为此我使用 gem)。但我无法获得工作页脚。除非我向下滚动页面,否则它是不可见的。我不知道如何解决这个问题。

应用程序.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;
}
4

2 回答 2

0

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

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

还可以查看这里的讨论,他们提出了一种设置粘性页脚的方法

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

于 2012-08-24T17:38:44.470 回答
0

尝试将以下 CSS 添加到您的页脚。无论用户滚动到页面的哪个位置,“固定位置”都会在同一位置显示您的页脚。“底部 0”将沿着屏幕底部对齐页脚。

position: fixed;
bottom:0;

希望这可以帮助!:)

于 2013-10-26T21:51:04.243 回答