我在为我的 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 图标
最佳答案
我通过从我的应用程序中禁用 Turbolinks 来修复我的网站。很可能有解决方法，但 AFAIK MDL 默认不支持 Turbolinks。
关于html - Material Design Lite 抽屉在导航链接点击时破坏了网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45601781/