Question

在你去网站之前，我希望你也能看到这个。您会注意到网站加载时，第一个或第二个......它以列表格式显示导航栏中的链接，看起来有些错误...... bc完成加载后看起来没问题。

网站：www.powerliftingbasics.com 每次刷新/加载页面时都会发生这种情况。我使用twitter bootstrap在rails上使用ruby。我无法理解。

这是我的导航栏代码：

    <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
          <a href="/" class="navlogo pull-left"><img src="assets/logosmall.png" alt="Small Logo"></a>
          <a class="brand navfont" href="/">Powerlifting Basics</a>
      <div class="container nav-collapse">
        <ul class="nav pull-right"> 
            <li><%= link_to "Bench Press", "/benchpress"  %></li>
            <li><%= link_to "Deadlift", "/deadlift"  %></li>
            <li><%= link_to "Squat", "/squat"  %></li>
            <li><%= link_to "Equipment", "/equipment"  %></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> more<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="divider"></li>
                  <li><%= link_to "Subscribe", "/subscribe"  %></li>
                  <li><a href="mailto:contact@powerliftingbasics.com"> Contact Us</a> </li> 
                </ul>
            </li>
        </ul> 
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Answer 1

在你的layouts / application.html.erb中在顶部添加application.css和application.js

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>PowerLiftingBasics</title>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application" %>
  </head>
  <body>

    <%= yield %>

  </body>

</html>

Answer 2

这会导致您在页面底部放置链接到您的css文件。你应该在页面正文之前加载它。至少，把

<link href="/assets/application-65943938be14c000984bcb9478d30563.css" media="all" rel="stylesheet" type="text/css">

在<head></head>个标签内。

最佳做法是在页面顶部放置css和favicon链接。 Javascripts链接位于正文的底部（在关闭</body>标记之前）。

页面加载后加载Javascript和Css

2 个答案: