我正在通过 rails 项目上的 zurb-foundation gem 使用 Zurb Foundation 3。一切都很顺利，直到我尝试添加导航栏：
<body>
<div id="container" class="twelve columns">
<div class="fixed contain-to-grid">
<nav class="top-bar">
<ul>
<li class="name"><h1><%= link_to "Home", root_path %></h1></li>
</ul>
<section>
<ul class="left">
<li><a href="#">Left</a></li>
</ul>
<ul class="right">
<li><a href="#">Right</a></li>
</ul>
</section>
</nav>
</div>
看起来像：
除了颜色，我没有覆盖任何 zurb 样式，我的假设是它看起来与文档http://foundation.zurb.com/docs/navigation.php中的第一个示例非常相似，但这似乎并不是这样的。该文档还提到了 javascript 依赖项，但这些都包括在内。
有人对如何开始让这个开始看起来漂亮有任何想法吗？
编辑：
将行添加到第一个列表中，如下所示：
<ul>
<li class="name"><h1><%= link_to "Home", root_path %></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
呈现：
检查元素以查看是否显示内容，导航 JS 在那里：
(function ($){
$.fn.foundationNavigation = function (options) {
var lockNavBar = false;
// Windows Phone, sadly, does not register touch events :(
if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
$(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
e.preventDefault();
var flyout = $(this).siblings('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function () {
lockNavBar = false;
});
}
lockNavBar = true;
});
$('.nav-bar>li.has-flyout', this).addClass('is-touch');
} else {
$('.nav-bar>li.has-flyout', this).hover(function () {
$(this).children('.flyout').show();
}, function () {
$(this).children('.flyout').hide();
});
}
};
})( jQuery );
从 Foundation 中寻找 css，它适用于按钮和所有内容，并且导航栏样式似乎也在那里，例如：
.nav-bar {
height: 40px;
background: #4d4d4d;
margin-top: 20px;
padding: 0;
}