【问题标题】:Footer doesnt display at the right place on homepage of railsapp页脚未显示在rails应用程序主页上的正确位置
【发布时间】:2015-05-28 11:45:30
【问题描述】:

我的页脚很好地显示在我的 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>

在我的布局中,如您所见,我将页脚放在产量之后。在应用程序中的任何地方,这都很好,但在我的主页中,页脚试图适应页面中间。这是主页的截图:

这是我从引导模板中获取的主页代码

<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代码。可能是你错过了一些课程。还要在控制器中检查您正在使用的布局的主页操作。
  • 将屏幕截图上传到其他地方,然后在此处分享网址。请添加您的主页标记,以便我们进行调试。
  • 我编辑了我的帖子,如果您需要更多内容,请告诉我
  • section id="contact"&gt; 请确认是代码粘贴错误还是页面出现错误的原因..:)
  • @PardeepDhingra 粘贴错误 :)

标签: html css ruby-on-rails twitter-bootstrap layout


【解决方案1】:

似乎是 HTML 标记的问题(即未闭合的标记)。尝试在HTML Validator 中查看您的主页。它应该有助于发现此类问题。

【讨论】:

  • 我用首页的html代码更新了帖子;我不认为这是一个标记问题(它是一个引导模板)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-07-25
  • 2014-05-25
  • 2014-05-05
  • 2016-11-26
  • 2022-07-04
  • 1970-01-01
  • 2014-12-08
相关资源
最近更新 更多