ブートストラップフッター：ページの左側に揃えられていません。 Railsのテンプレートの問題？

"footer.html.erb"テンプレートに奇妙な問題があります。ビューのサイズは100％ですが、左側のページと同じではないため、ページが約10％広がりますそれはまた醜く見えます。ブートストラップフッター：ページの左側に揃えられていません。 Railsのテンプレートの問題？

私はこの問題は、ブラウザがフッターの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; 
}

クロームこれを次のようにレンダリングします。

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

出典

2016-10-10 tfantina

JSFiddleください –

私は、これはRailsのテンプレートの問題（多分）であると考えているので、私はフィドルのだろうか有益か分からないが、ここで、それは次のとおりです。https ：//jsfiddle.net/tfantina/hfmnmo6p/ – tfantina

これは混乱です。一見PHPコードを無視しています。私たちがあなたを助けるのに役立つ視覚的なリンクを得ることができれば。 –

あなたは絶対位置を使用しているので、あなたがそれらの特性のために、あなたはwidth: 100%を残すことができますので

left: 0; 
right: 0;

を追加することにより、両端を「添付」するfooterを強制することができます。

絶対に配置された要素がドキュメントの通常の流れから取り出されるので、この余白は他のレイアウト要素に影響しないので、margin-top: 25pxを省略することもできます。

あなたの完全なCSS宣言、その後することができ

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

出典

2016-10-15 21:04:49 Eystein

ブートストラップフッター：ページの左側に揃えられていません。 Railsのテンプレートの問題？

答えて

関連する問題