使用Navbar切换页面是'跳跃'

时间:2015-06-02 14:20:41

标签: jquery twitter-bootstrap haml middleman

使用中间人时,我对页面之间切换的“跳跃性”有疑问。看看我的意思是看

Live Demo

问题是当我在页面之间切换时,有一个闪存的另一个页面似乎是某种子弹点列表。

有谁知道如何解决这个问题?

以下是其使用的导航代码的链接:

%nav.navbar.navbar-default{:role => "navigation"}
  .container
    / Brand and toggle get grouped for better mobile display
    .navbar-header
      %button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      / navbar-brand is hidden on larger screens, but visible when the menu is collapsed
      %a.navbar-brand{:href => "/"} Mellow Miles
    / Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/"} Home
        %li.dropdown
          %a.dropdown-toggle{"aria-expanded" => "false", "data-toggle" => "dropdown", :href => "#", :role => "button"}
            Bikes
            %span.caret
          %ul.dropdown-menu{:role => "menu"}
            %li
              %a{:href => "/page/racing_bikes.html"} Racing bikes
            %li.divider
            %li
              %a{:href => "/page/mountain_bikes.html"} Mountain bikes
            %li.divider
            %li
              %a{:href => "/page/children_bikes.html"} Children's bikes
            %li.divider
            %li
              %a{:href => "/page/folding_bikes.html"} Folding Bikes
            %li.divider
            %li
              %a{:href => "/page/town_bikes.html"} Town bikes
        %li
          %a{:href => "/page/accessories.html"} Accessories
        %li
          %a{:href => "/page/servicing.html"} Servicing
        %li
          %a{:href => "/page/contact.html"} Contact Us

1 个答案:

答案 0 :(得分:0)

您似乎在<body>标记内的页面底部包含了CSS文件。应该在<head>标记内导入CSS。因为您没有这样做,所以在加载和应用CSS之前会呈现页面,因此您会看到此FUOC(无格式内容的闪烁)。