0

私は通常、プロジェクトにTwitter Bootstrap Railsジェムを使用しますが、ZurbFoundationジェムを試してみようと思いました。手紙のインストール手順に従いました。ナビゲーションを追加したとき：

<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>

私は次のようになります：

スクリーンショットの壊れたナビゲーション

ロゴのプレースホルダーが右側のナビゲーションと整列しておらず、ナビゲーションリンクに灰色のグラデーションがないことに注意してください。

私の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>
4

1 に答える 1

1

Zurb Foundationのgemを更新し、ドキュメントを参照することで、これを解決しました。3.XではなくZurb2.Xを使用していました。

gemファイルには次のものが含まれている必要があります。

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

application.scssは次のようになります。

@import "foundation";

それ以外の：

*= require "foundation"
于 2013-01-18T03:43:49.373 に答える