0

我在 Bonfire 中使用 twitter 引导程序。如果内容较少，我会尝试在底部添加页脚，如果内容较多，则页脚会移到最后。

我已经尝试了几个小时，但无法找出我错过了什么。我检查了可用的示例和代码，但无法找出有什么不同或缺少什么。

如果有人能指出这里遗漏了什么，我将不胜感激。

    <!doctype html><head><meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />

<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brokerage Free - PAN Services </a>
    </div>
    <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav pull-left">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apply for PAN <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li ><a href="#">New PAN Application</a></li>
                <li class="divider"></li>
                <li><a href="#">Replacement PAN Application</a></li>
                <li class="divider"></li>
                <li><a href="#">Correction PAN Application</a></li>
              </ul>
            </li>
            <li ><a href="#">FAQ</a></li>
            <li><a href="#about">Track Application Status</a></li>
            <li><a href="#contact">Contact Us</a></li>

          </ul>

    </div><!--/.navbar-collapse -->
  </div>
</div>


<div class = "container">
<h1> Privacy Policy </h1>



We are a financial Services Company, offering a wide variety of Financial Services. 



</div><div class="push"></div>

<footer>
<div class="container">
<div class="span12">
    <div clas="row">
        <div class="span2 offset1"><a href="/bonfire/public/pan/about_us">About US</a></div>
        <div class="span2 "><a href="/bonfire/public/pan/privacy">Privacy Policy</a></div>
        <div class="span2 "><a href="#">Terms of Use</a></div>
        <div class="span2 "><a href="#">Contact Us</a></div>
    </div>
<div class="push"></div>
</div>
<div class="row">
    <p align="center">&copy; Brokerage Free 2014. - All rights reserved.
    </div>
</div>
</footer>
</div>

footer_style.css 如下所示：

<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative; 
}

footer a {
color: #999; 
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}


#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>
4

1 回答 1

0

这个问题是 CSS 问题，与 Bonfire 无关。我正在发布此解决方案，因此如果将来有人遇到类似问题，可能会从中受益。

以下链接帮助我找到了解决方案：

http://css-tricks.com/snippets/css/sticky-footer/

解决此问题的方法是拥有一个包装器 div 和一个位于包装器 div 之外的页脚 div。该链接有详细信息。

最好的。

于 2014-07-09T06:18:42.250 回答