2013-01-18 1 views
0

Обычно я использую щебетать Bootstrap Rails для своих проектов, но я думал, что дам жемчужину Zurb Foundation. Я следил за установкой instructions на письмо. Когда я добавил навигации:Zurb Foundation gem сломанная навигация

<div class="row"> 
<div class="three columns"> 
    <h1><img src="http://placehold.it/400x100&text=Logo" /></h1> 
    </div> 
    <div class="nine columns"> 
    <ul class="nav-bar right"> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 

я получаю следующее:

Screenshot broken navigation

Обратите внимание, что логотип заполнителем не совпадает с навигацией справа и навигационные ссылки не имеют серый цвет градиент на них.

Моего application.html.erb выглядит следующим образом:

<!DOCTYPE html> 
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8" /> 

    <!-- Uncomment to make IE8 render like IE7 --> 
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> --> 

    <!-- Set the viewport width to device width for mobile --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <title><%= content_for?(:title) ? yield(:title) : CONFIG['title'] %></title> 

    <!-- Included CSS Files --> 
    <%= stylesheet_link_tag "application" %> 

    <%= csrf_meta_tags %> 
</head> 
<body> 

    <%= render 'layouts/navigation' %> 

    <div class="container"> 
    <%= yield %> 
    </div> 

    <!-- Included JS Files --> 
    <%= javascript_include_tag "application" %> 

    <% if CONFIG['google_analytics_id'] %> 
    <!-- Google Analytics --> 
    <script> 
     var _gaq=[['_setAccount','<%= CONFIG['google_analytics_id'] %>'],['_trackPageview']]; 
     (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
     g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; 
     s.parentNode.insertBefore(g,s)}(document,'script')); 
    </script> 
    <% end %> 

</body> 
</html> 

ответ

1

Я решил эту проблему путем обновления жемчужины Zurb Foundation и со ссылкой на documentation. Я использовал Zurb 2.X, а не 3.X.

камень файл должен включать в себя: Теперь

gem 'compass-rails' 
gem 'zurb-foundation', '~> 3.2.4' 

application.scss должны иметь:

@import "foundation"; 

вместо:

*= require "foundation"