问题标签 [zurb-foundation-6]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4949 浏览

javascript - 如何修复顶部栏下拉菜单链接在 Foundation 6 中不起作用

在使用 Foundation 6 构建整个网站之前和之后,我从未使用过,我意识到我的顶部栏下拉菜单中的链接不起作用。我到处寻找这个问题的答案,我看到了很多不同的答案。有人说要下载更新版本的foundation.min.js,有人说要下载更新版本的foundation.topbar.js,还有人认为这个问题解决不了。

下面是一些代码(我的网站可以在http://littleeternities.com找到,这样您就可以自己了解我所说的链接不“工作”的意思)。

顶部条码

这是添加的脚本

在文件 app.js 中,编写了以下 JavaScript

到目前为止,我已经尝试了所有方法来解决这个问题,现在我只是卡住了。任何答案将不胜感激!:)

0 投票
2 回答
4014 浏览

javascript - 如何在字体加载或重排后触发均衡器?

我在 DOM 准备好后过早触发 Foundation 的均衡器插件时遇到问题。我正在加载一些 TypeKit 字体,它们需要几毫秒才能加载,但均衡器插件会在字体加载之前触发。

发生的情况是后备字体(与我的 TypeKit 字体的高度不同)在很短的时间内可见,可能是 50 毫秒。当后备字体可见时,均衡器将高度应用于我的 div。后备字体更高,在某些情况下,它会使文本行中断为 2 行。

然后当 TypeKit 字体加载时,div 不会调整大小。它们太高了,因为它们的高度在后备字体可见时进行了调整。

那么...有没有办法在 TypeKit 字体加载后触发均衡器插件?另外,我看到有一种方法可以在回流时触发插件,这可能是最好的,但我在 Foundation 6 中看不到回流,只有 5。

0 投票
1 回答
1384 浏览

zurb-foundation - Foundation 6 开关不起作用?

在以下非常基本的示例中,开关可以正常工作并且样式正确。如果我只是将foundation.css 版本从5.5.2 更改为6.0.5,切换样式就会丢失。为什么开关在 Foundation 6.0 中不起作用???同样,只需将样式表更改为“ https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/css/foundation.css ”,它就会停止工作。

0 投票
2 回答
8659 浏览

sass - Foundation 6 不生成任何样式

我已经设置了一个新项目来使用 Gulp 和 Sass 测试 Foundation 6,但它似乎根本无法编译。还有一篇接近这个主题的帖子,但我个人认为接受的答案不是正确的解决方案 - 因为它包含所有组件,实际上与 Zurb 建议的相反(请参阅此问题:https ://github.com /zurb/foundation-sites/issues/7537)。反正...

我从凉亭安装了 Foundation 6.1.1,并像这样添加了我的gulp-sass函数的路径gulpfile.js

theme.scss的如下:

编译我的 scss 时,我没有收到任何错误,但输出theme.css如下所示:

所以看起来它正在访问文件,因为注释被输出,但它没有编译任何 Sass 导入foundation.scss

0 投票
0 回答
125 浏览

navigation - Zurb Foundation - 移动导航未在第二层层次结构页面中打开

我在这个网站http://hlb-mann-judd.businesscatalyst.com上使用了 Zurb Foundation 6 框架。除了移动导航无法打开处于第二层层次结构中的页面之外,一切都很好。这是出现问题的链接http://hlb-mann-judd.businesscatalyst.com/software/myob 移动导航栏出现但它们不再起作用

这些页面上没有什么不同,除了它们有第二层路径名并且我已经检查过第二层页面是否具有所有相关文件的正确路径名,所以这并不是导致问题的原因(尽管我认为它某种程度上与它有关)。如果有人可以建议我解决此问题需要什么,我将不胜感激。

以下是相关代码:

0 投票
2 回答
3863 浏览

zurb-foundation - 如何使用块网格类

一切都运行良好:网格、媒体查询、文本可见性以及所有其他好东西。

我尝试为我的社交媒体图片链接使用块状网格,但发现它根本不起作用。我浏览了项目中包含的基础文件,并且block-grid没有在任何地方定义类。我很好奇我错过了什么。是否有一个单独的文件需要包含到我的项目中才能使用block-grid's?

基础块网格文档

我的项目中包含的脚本和样式表:

我尝试做的一个例子:

上面代码的结果只是一个普通的无序列表,每张图像都有一个项目符号在单独的行上。

此外,img-icon类不会覆盖任何内容。删除此类不会block-grid起作用。

编辑:请注意,我从网站部分通过他们的网站下载了基础 6 。您可以通过查看上面的脚本和样式表标签来查看我在项目中包含的文件。

编辑2:(foundation.css由于大小而添加到jsfiddle):foundation.css文件内容

0 投票
1 回答
154 浏览

zurb-foundation-6 - Foundation 6 切换的标题栏仅在网站的一页上不起作用

与该主题的许多其他帖子不同,我的标题栏在每一页上都可以正常工作,但有一个:

http://www.pcvsoftware.net/christlutheran/contact.html

在大于小屏幕的屏幕上,我得到水平顶部菜单。在我的手机上,我看到了切换的标题栏,带有汉堡菜单图标,当点击该图标时,顶部菜单栏显示为垂直下拉菜单——除了上面链接的页面。所有页面上的代码都是相同的。有人可以看看这个并找出问题所在吗?我想让标题栏变粘,但在我弄清楚为什么我有这个问题之前,看不到做出这种努力。我认为这可能是对 Google Maps API javascript 的干扰,但将其注释掉并没有什么区别。提前致谢。

0 投票
2 回答
1490 浏览

javascript - Zurb Foundation 6:顶栏不会塌陷

我在使用 Foundation 6 时遇到问题,我是一个完全的初学者,我正在尝试将它应用到我正在为大学项目开发​​的网页上。我直接从Zurb网页复制粘贴了topbar代码并应用到我的项目中,它根本不起作用。这是我应用的代码:

问题是菜单永远不会折叠,并且在显示菜单时预计会隐藏的顶部栏,除非设备屏幕很小,否则它总是在视线范围内。

提前致谢!

电脑屏幕

手机屏幕

0 投票
1 回答
1904 浏览

html - 视口高度“.is-anchored .is-at-bottom”末端的 Zurb Foundation 6 粘性开关状态

试图创建一个始终贴在网站顶部的菜单。关注 zurb.foundation 的文档,但 .sticky 的行为总是出人意料。或者,也许我没有得到一些明显的?

请在此处检查重建:http: //codepen.io/mister-hansen/pen/wMgrPm

如果网站向下滚动,并达到初始视口的确切高度,粘性插件会将元素 .sticky 从更改is-stuck is-at-top为:.is-anchored .is-at-bottom所以 .sticky 消失。

谢谢你。

更新 文档的第一部分:foundation.zurb.com/sites/docs/sticky.html 解释了所描述的行为。由于默认 body { height: 100% } css,body 被精确解释为 max。视口的高度。

所以在我的情况下,解决方案是 a) 用 auto 覆盖身体的高度。但更好 b) 只是避免对预期的固定标头使用粘性功能。

0 投票
1 回答
542 浏览

html - Foundation 5 顶栏,带有 Foundation 6 上的居中徽标构建块

Foundation 5 构建块在 Foundation 6 上中断。有人知道解决方法吗?我曾尝试重新编写代码,但相信我遗漏了一些东西。谢谢阿道夫

这是基础 5 代码:

这是我尝试过的: