Question

我以为我按照指示行事，但也许我错过了什么？

的Gemfile：
gem 'foundation-rails'

跑bundle

跑rails g foundation:install

添加并更改为：

视图/布局/ application.html.erb

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

  <body>

    <%= yield %>

  </body>
</html>

资产/样式表/ application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides

 */

资产/样式表/ foundation_and_overrides.scss

// -- snip --

// - - - - - - - - - - - - - - - - - - - - - - - - -

// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;

@import 'foundation';

资产/ Javascript角/ application.js中

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(function(){ $(document).foundation(); });

我已成功看到按钮正确显示，但其他事情只是拒绝按预期显示。我看到的第一件事是网格示例，所以我复制并粘贴了源代码，但它没有像示例那样阴影。间距似乎正确......

然后我尝试了手风琴。我复制并粘贴了示例的源代码。它显示了列表项目符号，但没有扩展/收缩。

然后我尝试了顶栏。我复制并粘贴了示例的源代码。它在顶部放置一个水平条，但菜单项不是内联的。

然后我尝试制作一个全新的rails项目来测试基础。我按照相同的步骤，得到了相同的结果。（嘟some一些关于疯狂的事情......）

我之前使用过粉底，但显然我错过了一些重要的东西。

$ rvm list

rvm rubies

=* ruby-2.2.1 [ x86_64 ]

# => - current
# =* - current && default
#  * - default

$ rails -v
Rails 4.2.4

Answer 1

foundation-rails gem目前加载基础5，而网站上有基础6的示例。看起来它们不兼容;）

要进行测试，请参阅documentation for foundation 5

无法让基金会开箱即用

1 个答案: