首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法使Foundation开箱即用

无法使Foundation开箱即用
EN

Stack Overflow用户
提问于 2015-12-06 01:49:04
回答 1查看 135关注 0票数 0

我以为我照着指示走了,但也许我漏掉了什么?

Gemfile:

gem 'foundation-rails'

运行bundle

运行rails g foundation:install

这将添加并更改以下内容:

视图/布局/应用程序.html.erb

代码语言:javascript
运行
复制
<!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>

assets/stylesheets/application.css

代码语言:javascript
运行
复制
/*
 * 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

 */

assets/stylesheets/foundation_and_overrides.scss

代码语言:javascript
运行
复制
// -- snip --

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

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

@import 'foundation';

assets/javascripts/application.js

代码语言:javascript
运行
复制
// 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项目来测试foundation。我遵循了同样的步骤,得到了同样的结果。(含糊地说了些关于精神错乱的话...)

我以前用过foundation,但显然我遗漏了一些重要的东西。

代码语言:javascript
运行
复制
$ rvm list

rvm rubies

=* ruby-2.2.1 [ x86_64 ]

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

$ rails -v
Rails 4.2.4
EN

回答 1

Stack Overflow用户

发布于 2015-12-09 07:53:33

foundation-rails gem当前加载了foundation 5,而网站上有foundation 6的示例。它们似乎不兼容;)

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34108795

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档