Question

我和我的＆＃34; footer.html.erb＆＃34;有一个奇怪的问题。模板它是视图大小的100％，但它不会与左侧齐平，因此它使页面宽度比看起来难看的宽10％。

我认为问题可能是因为浏览器在页脚div之后呈现<div class="container">的结束div。我不知道为什么。

这是我的application.html.erb：

<!DOCTYPE html>
<html>
<head>
  <title>ProfReview</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

  <%= render 'layouts/header' %>
  <!-- bootstrap stuff-->

  <div class="container">
  <div class="row">
    <div class="center-block ">    <% flash.each do |name, msg| %>
      <%= content_tag(:div,msg, class: "alert alert-info") %>
      <% end %>
    <%= yield %>
    <%= debug(params) if Rails.env.development? %>
  </div>
  </div>
</div>
<%= render 'layouts/footer' %>

</body>
</html>

这是footer.html.erb：

<div class="footer">
<footer class="footer">
  <p class="text-muted">Copyright 2016<p>
</footer>
  </div>

最后是footer.css

/* Footer */

footer {
  background-color: $footer;
  color: $white;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  margin-top: 25px;
  padding-left: 20px;
  padding-top: 10px;
}

Chrome将其呈现为：

<div class="container">
  <div class="row">
    <div class="center-block ">        
<div class="panel panel-default">

 <!-- Main content -->

  </div>
  </div>
</div>

<div class="footer">
<footer class="footer">
  <p class="text-muted">Copyright 2016 </p><p>
</p></footer>
  </div>
</div>

Answer 1

由于您使用的是绝对定位，因此可以强制footer进行＆＃34;附加＆＃34;最后加入

left: 0;
right: 0;

由于这些属性，您可以省略width: 100%。

您也可以省略margin-top: 25px，因为绝对定位的元素已从文档的正常流程中取出，因此此边距不会影响其他布局元素。

您的完整CSS声明可以是

footer {
  background-color: $footer;
  color: $white;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 40px;
  padding-top: 10px;
}

Bootstrap页脚：未与页面左侧对齐。 Rails模板问题？

1 个答案: