Question

我的页脚在我的主页上显示得非常好。

这是我的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>

在我的布局中，你可以看到我在收益后放了我的页脚。应用程序中的任何地方都可以正常工作，但在我的主页中，页脚会尝试放在页面中间。这是主页的屏幕截图：

footer in middle of page

以下是我从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>

这里是视图/ 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>

Answer 1

似乎是HTML标记的问题（即未封闭的标记）。尝试在HTML Validator中查看您的主页。它应该有助于找到这样的问题。

页脚不会显示在railsapp主页的正确位置

1 个答案: