使用导航栏在页面之间切换是 'jumpy'

Question

我在使用中间人时在页面之间切换 'jumpyness' 时遇到问题。要明白我的意思，请参阅

问题是当我在页面之间切换时，会出现另一个页面的闪光，似乎是某种项目符号列表。

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

这是link它使用的导航代码：

%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

Answer 1

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

使用导航栏在页面之间切换是 'jumpy'

Switching Between Pages Using Navbar Is 'jumpy'

jquery

haml

middleman

twitter-bootstrap