引导页脚：未与页面左侧对齐。 Rails 模板问题？答案

【问题标题】：Bootstrap footer: not aligned with the left side of the page. Rails template issue?引导页脚：未与页面左侧对齐。 Rails 模板问题？
【发布时间】：2016-10-10 19:33:49
【问题描述】：

我的“footer.html.erb”模板有一个奇怪的问题，它是视图大小的 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>

【问题讨论】：

请JSFiddle
我相信这是一个 Rails 模板问题（也许），所以我不知道 Fiddle 会有多大的启发性，但它是：jsfiddle.net/tfantina/hfmnmo6p
一团糟。似乎忽略了php代码。如果你能得到一个视觉链接，这将有助于我们帮助你。
奇怪的是我只是把它推到 Heroku 那里似乎没有问题。
不知道你在说什么

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

由于您使用的是绝对定位，您可以强制 footer 通过添加“附加”两端

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;
}

【讨论】：