Zurb Foundation Nav 在 Rails 项目中的风格有限答案

【问题标题】：Zurb Foundation Nav has Limited Style in Rails ProjectZurb Foundation Nav 在 Rails 项目中的风格有限
【发布时间】：2012-10-12 18:54:49
【问题描述】：

我在 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 );

从基础中寻找 css，它适用于按钮和所有东西，并且导航栏样式似乎也在那里，例如：

.nav-bar {
  height: 40px;
  background: #4d4d4d;
  margin-top: 20px;
  padding: 0;
}

【问题讨论】：

你能检查元素并验证样式是否被应用吗？在我看来，导航元素的 CSS 完全缺失。
基础Top Bar和Nav Bar中有两个导航栏。您正在实现 Top Bar，但是您通过检查源代码发布的代码显示了 Nav Bar js/css。有什么方法可以直接链接到您的网站？

标签： ruby-on-rails ruby-on-rails-3 zurb-foundation

【解决方案1】：

在 zurb-foundation 3.0.9 中，我遇到了与您完全相同的问题。尝试升级到 3.1.1

在您的 Gemfile 中，使用：

gem 'zurb-foundation', '~> 3.1.1'

在 application.scss 中：

@import 'foundation';

确保您在文档中准备好此内容

$(document).foundationTopBar();

更新宝石

bundle update

确保缓存被移除：

bundle exec rake tmp:cache:clear

干杯！

【讨论】：

【解决方案2】：

您在第一个列表项之后缺少这一行

<li class="toggle-topbar"><a href="#"></a></li>

这可能是正在发生的事情，但不是 100% 肯定的。

【讨论】：

【解决方案3】：

您应该在下面的所有<div> 标签上方和<body> 标签下方放置类似此示例的内容。它存在于网格系统之外，因此它应该高于一切。注意没有<div> 标签。

<nav class="top-bar">
    <ul>
      <li class="name"><h1><a href="#">James Stone</a></h1></li>
      <li class="toggle-topbar"><a href="#"></a></li>
    </ul>
    <section>
      <ul class="right">
        <li class="has-dropdown"><a href="#">I</a>
          <ul class="dropdown">
            <li><a href="#">Bio</a></li>
            <li><a href="#">Resume</a></li>
          </ul>
        </li>
    </section>
  </nav>

【讨论】：