Question

我正在使用Rails 3.2和Ruby 4。我有以下页脚：

<div class="container">
  <footer class="footer">
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p class="pull-left">&copy; <%= Date.current.year %> Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</div>

以下CSS：

html {
  position: relative;
  min-height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

.footer p {
  position: absolute;
  bottom: 0;
}

body {
  margin-bottom: 60px;
}

我基本上试图将http://getbootstrap.com/examples/sticky-footer/和http://getbootstrap.com/examples/carousel/中的Bootstrap页脚结合起来。

问题：页脚根据需要垂直放置。水平应该浮动到左侧也正确定位。问题是浮动到右边的是 over 左边浮动的文本，即“Back to top”浮动在另一个文本上。

小问题：另外，当我没有添加class =“footer”时，它没有实现页脚的CSS。

Answer 1

问题是您的CSS正在使p内的footer标记绝对定位。删除它，它的工作原理。另外，我会通过将这些行添加到footer标记来整理您的CSS，这将阻止页脚向右浮动。

left: 0;
padding-left: 50px;
padding-right: 50px;

＆＃13;

html {
  position: relative;
  min-height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
  left: 0;
  padding-left: 50px;
  padding-right: 50px;
}

.footer p {
  bottom: 0;
}

body {
  margin-bottom: 60px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="container">
  <footer class="footer">
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p class="pull-left">&copy; 2015 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</div>

＆＃13;

无法让我的页脚工作（某些文字应该向右浮动，它没有）

1 个答案: