页脚未显示在 Rails 应用程序主页上的正确位置
Footer doesnt display at the right place on homepage of railsapp
我的页脚在我的 rails 应用程序中显示得很好，但在我的主页上除外。
这是我的 application.html 文件：
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) || "Wagon Rails" %></title>
<meta name="description" content="<%= (yield(:description) || "").squish %>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<%= stylesheet_link_tag :application, media: "all" %>
<%= favicon_link_tag %>
<%= yield(:stylesheets) %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "shared/navbar" %>
<%= render "shared/flashes" %>
<%= yield %>
<%= render "shared/footer" %>
<%= javascript_include_tag "https://maps.google.com/maps/api/js?sensor=false" %>
<%= javascript_include_tag "https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %>
<%= javascript_include_tag :application %>
<%= yield(:after_js) %>
</body>
</html>
在我的布局中，如您所见，我将页脚放在了 yield 之后。在应用程序的任何地方都可以正常工作，但在我的主页中，页脚试图适应页面的中间。这是主页的屏幕截图：
这是我从 bootstrap 模板
中获取的主页代码
<header class="background-cover">
<div class="header-content">
<div class="header-content-inner">
<h1>Vos inscriptions et vos convocations aux tournois de tennis en un Clic</h1>
<hr>
<p id="avectm"><strong>Avec TennisMatch le calvaire des inscriptions et des gestions de convocation est terminé. Vous pouvez vous concentrer sur la seule chose importante : donnez le maximum sur le court.</strong></p>
<%= link_to t(".sign_up", default: "S'inscrire"), new_user_registration_path, class: "btn btn-success page-scroll pad", id: "inscr"%>
</div>
</div>
</header>
<section class="bg-green" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Une plate-forme de gestion pour les juges arbitre</h2>
<hr class="light">
<p class="text-faded">Juge Arbitre ? TennisMatch est là pour vous aider ! Référencer votre tournoi puis Gérer vos inscriptions et convocations grace à la plate-forme</p>
<%= link_to "Juge Arbitre ?", judge_path, class: "btn btn-default btn-xl margetop" %>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Un service optimum pour les juges arbitres</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond wow bounceIn text-primary"></i>
<h3>Référencer son tournoi</h3>
<p class="text-muted">Vous êtes juge arbitre et vous organisez un tournoi ? Il vous suffit de le référencer sur le site pour bénéficier de tous les avantages de TennisMatch</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane wow bounceIn text-primary" data-wow-delay=".1s"></i>
<h3>Gérer les inscriptions</h3>
<p class="text-muted">TennisMatch vous permet de gérer toutes les inscriptions au tournoi. Fini la petite boite en métal et la clé autour du coup. Tous les paiements se font en ligne et les joueurs ne sont pas débités si leur inscription n'est pas retenue.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o wow bounceIn text-primary" data-wow-delay=".2s"></i>
<h3>Convocations</h3>
<p class="text-muted text-center">Finit les coups de téléphone, les emails non lus ou messages jamais écoutés par les joueurs. Tennis Match vous permet d'envoyer plusieurs convocations simultanément. Pour chaque convocation envoyée, le joueur concerné est prévenu par email, sms et notification. Plus d'excuse !</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart wow bounceIn text-primary" data-wow-delay=".3s"></i>
<h3>Plus que du plaisir</h3>
<p class="text-muted">Avec TennisMatch vous n'avez plus qu'à vous asseoir et profiter du spectacle ! Jeu set et match !</p>
</div>
</div>
</div>
</div>
</section>
这是位于 views/shared/_footer.html.erb
中的页脚代码
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Contactez nous!</h2>
<hr class="primary">
<p>Vous voulez nous aider à améliorer le site ? Nous faire une suggestion ? ou tout simplement parler tennis autour d'un café ? N'hésitez pas à nous contacter !</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x wow bounceIn"></i>
<p>06 66 02 74 14</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a href="mailto:your-email@your-domain.com">contact@tennis-match.fr</a></p>
</div>
</div>
</div>
</section>
似乎是 HTML 标记（即未关闭的标记）的问题。尝试检查 HTML Validator 中的主页。应该有助于发现这类问题。
我的页脚在我的 rails 应用程序中显示得很好，但在我的主页上除外。
这是我的 application.html 文件：
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) || "Wagon Rails" %></title>
<meta name="description" content="<%= (yield(:description) || "").squish %>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<%= stylesheet_link_tag :application, media: "all" %>
<%= favicon_link_tag %>
<%= yield(:stylesheets) %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "shared/navbar" %>
<%= render "shared/flashes" %>
<%= yield %>
<%= render "shared/footer" %>
<%= javascript_include_tag "https://maps.google.com/maps/api/js?sensor=false" %>
<%= javascript_include_tag "https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %>
<%= javascript_include_tag :application %>
<%= yield(:after_js) %>
</body>
</html>
在我的布局中，如您所见，我将页脚放在了 yield 之后。在应用程序的任何地方都可以正常工作，但在我的主页中，页脚试图适应页面的中间。这是主页的屏幕截图：
这是我从 bootstrap 模板
中获取的主页代码<header class="background-cover">
<div class="header-content">
<div class="header-content-inner">
<h1>Vos inscriptions et vos convocations aux tournois de tennis en un Clic</h1>
<hr>
<p id="avectm"><strong>Avec TennisMatch le calvaire des inscriptions et des gestions de convocation est terminé. Vous pouvez vous concentrer sur la seule chose importante : donnez le maximum sur le court.</strong></p>
<%= link_to t(".sign_up", default: "S'inscrire"), new_user_registration_path, class: "btn btn-success page-scroll pad", id: "inscr"%>
</div>
</div>
</header>
<section class="bg-green" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Une plate-forme de gestion pour les juges arbitre</h2>
<hr class="light">
<p class="text-faded">Juge Arbitre ? TennisMatch est là pour vous aider ! Référencer votre tournoi puis Gérer vos inscriptions et convocations grace à la plate-forme</p>
<%= link_to "Juge Arbitre ?", judge_path, class: "btn btn-default btn-xl margetop" %>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Un service optimum pour les juges arbitres</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond wow bounceIn text-primary"></i>
<h3>Référencer son tournoi</h3>
<p class="text-muted">Vous êtes juge arbitre et vous organisez un tournoi ? Il vous suffit de le référencer sur le site pour bénéficier de tous les avantages de TennisMatch</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane wow bounceIn text-primary" data-wow-delay=".1s"></i>
<h3>Gérer les inscriptions</h3>
<p class="text-muted">TennisMatch vous permet de gérer toutes les inscriptions au tournoi. Fini la petite boite en métal et la clé autour du coup. Tous les paiements se font en ligne et les joueurs ne sont pas débités si leur inscription n'est pas retenue.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o wow bounceIn text-primary" data-wow-delay=".2s"></i>
<h3>Convocations</h3>
<p class="text-muted text-center">Finit les coups de téléphone, les emails non lus ou messages jamais écoutés par les joueurs. Tennis Match vous permet d'envoyer plusieurs convocations simultanément. Pour chaque convocation envoyée, le joueur concerné est prévenu par email, sms et notification. Plus d'excuse !</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart wow bounceIn text-primary" data-wow-delay=".3s"></i>
<h3>Plus que du plaisir</h3>
<p class="text-muted">Avec TennisMatch vous n'avez plus qu'à vous asseoir et profiter du spectacle ! Jeu set et match !</p>
</div>
</div>
</div>
</div>
</section>
这是位于 views/shared/_footer.html.erb
中的页脚代码<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Contactez nous!</h2>
<hr class="primary">
<p>Vous voulez nous aider à améliorer le site ? Nous faire une suggestion ? ou tout simplement parler tennis autour d'un café ? N'hésitez pas à nous contacter !</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x wow bounceIn"></i>
<p>06 66 02 74 14</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a href="mailto:your-email@your-domain.com">contact@tennis-match.fr</a></p>
</div>
</div>
</div>
</section>
似乎是 HTML 标记（即未关闭的标记）的问题。尝试检查 HTML Validator 中的主页。应该有助于发现这类问题。