Material Design Lite 抽屉在导航链接点击时破坏网站答案

【问题标题】：Material Design Lite drawer breaks website on nav link clickMaterial Design Lite 抽屉在导航链接点击时破坏网站
【发布时间】：2017-08-09 22:47:59
【问题描述】：

我在为我的 Ruby on Rails 应用程序进行布局时遇到了一个奇怪的错误。

这是我目前的布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">CTC151</span>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Test</span>
        <nav class="mdl-navigation">
          <%= link_to('Home', root_path, class: 'mdl-navigation__link') %>
          <%= link_to('News', news_index_path, class: 'mdl-navigation__link') %>
          <%= link_to('Departments', root_path, class: 'mdl-navigation__link') %>
        </nav>
      </div>
    </div>
  </body>
</html>

单击导航抽屉中的任何链接都会破坏我的布局，如下所示：before、after。整个网站被限制在顶部的那个小空间中。我已经删除了任何个性化样式表，以确保它不是问题的根源。唯一的样式表是 MDL 和 MDL 图标

【问题讨论】：

你能给我们提供一个重现问题的演示吗？我把它放在一起并没有看到它codepen.io/mcoker/pen/KvmbWX?editors=1010
我认为这个错误与 MDL 如何通过this gem 集成到我的项目中有关。像您一样简单地将链接包含到我的布局中似乎可以解决我的问题。

标签： html css ruby-on-rails ruby material-design

【解决方案1】：

我通过从我的应用中禁用 Turbolinks 来修复我的网站。很可能有一种解决方法，但 AFAIK MDL 默认不支持 Turbolinks。

【讨论】：