我只是将ui（Rails 4）从Bootstrap移到了Foundation5。我为大屏幕添加了普通Nav，为小屏幕添加了Offcanvas导航。请参阅此处以了解更多详细信息：http : //foundation.zurb.com/docs/components/offcanvas.html
当我单击菜单时，offcanvas导航显示所有链接，然后我可以单击至内容，再次打开导航，但是，当我单击导航中的链接时，则我无法打开offcanvas导航，它看起来就像它被阻止一样，我必须在浏览器中手动刷新我的视图。
这是我的代码：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : t('.siteTitle') %></title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag 'vendor/modernizr' %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- NAVIGATION Top Bar -->
<!------------------------>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div class="contain-to-grid sticky fixed">
<nav class="top-bar hide-for-small" data-topbar data-options="is_hover: false">
<ul class="title-area">
<li class="name">
<h1><%= link_to t('.siteTitle'), root_path, :id => 'newolu' %></h1>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown active">
<a href="#"><%=t('.menus')%></a>
<ul class="dropdown">
<li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#"><%=t('.changelanguage')%></a>
<ul class="dropdown">
<li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
<li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
</li>
</ul>
</section>
</nav>
</div>
<!-- NAVIGATION Offcanvas -->
<!-------------------------->
<div class="fixed show-for-small">
<nav class="tab-bar">
<section class="left tab-bar-section">
<h1 class="title"><%= t('.siteTitle') %></h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
</div>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label class="first">Newolu</label></li>
<li><<%= link_to 'Home', root_path, :id => 'newolu' %></li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label><%=t('.menus')%></label></li>
<li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label><%=t('.changelanguage')%></label></li>
<li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
<li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
</ul>
</aside>
<!-- Content -->
<!------------->
<section class="main-section">
<!-- Notice -->
<!------------>
<% if notice %>
<div data-alert class="alert-box info radius">
<p id="notice"><%= notice %></p>
<a href="#" class="close">×</a>
</div>
<% end %>
<!-- content goes here -->
<%= yield %>
</section>
<a class="exit-off-canvas" href="#"></a>
</div>
</div>
<%= javascript_include_tag 'application' %>
</body>
有谁知道为什么会出现这个问题？我的第二个问题是，以下代码段中的文本未居左对齐，而是在中间。当我将其更改为右或中时，它在同一位置为负号。
<section class="left tab-bar-section">
<h1 class="title"><%= t('.siteTitle') %></h1>
</section>
这是一张图片：
希望有人能帮忙..非常感谢
将data-no-turbolink标志添加到包含您链接的标签中，它将禁用该链接的Turbolink，从而触发完全重新加载。我刚刚在ios上进行了测试。无需禁用整个turbolinks gem。<div data-no-turbolink><a href="/link"></a></div>这应该做到。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句