问题标签 [zurb-foundation]

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 投票
2 回答
563 浏览

zurb-foundation - 使用 Zurb Foundation 在表单中显示元素

我正在使用CSS Framework Foundation,当我编写以下代码时:

我明白了:

在此处输入图像描述

但我想显示文本“发票发送后的天数”,如下所示:

在此处输入图像描述

0 投票
2 回答
5420 浏览

html - 让 Zurb 的 Foundation 3 与 IE7 一起工作

已经提出了一种使 Zurb 的 Foundation 3 Framework 与 IE7 一起工作的解决方案。不一定是复杂的支持,但肯定是网格支持。

解决方案如下: http: //www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/

我试图在这里复制这个:http: //sausag.es/foundation/grid.html

我在我的foundation.min.css 中添加了指向htc 文件的链接

引用是相对于 HTML,而不是 CSS。

我在 htaccess 中添加了一行关于 htc 文件的内容。

但是我仍然无法像在 IE8 中那样在 IE7 中显示网格。我哪里错了?

0 投票
4 回答
7296 浏览

javascript - 通过 JavaScript 在 Zurb's Foundation 中更改选择框的值

我很难更改 Zurb 基础中选择框的值。我正在使用自定义表单,它只是隐藏实际的选择框并使用无序列表作为选择框。我的问题是更改选择框值的常用方法不起作用:

上面的代码假设选择框中每个选项的值与文本相同:

我也试过:

但它也不起作用。

0 投票
5 回答
6969 浏览

html - Zurb Foundation - 删除中等屏幕的列

我在 Zurb Foundation 3 中有一个站点原型,到目前为止我有桌面版本,现在我正在调整它以负责平板电脑和手机。

我正在苦苦挣扎的是:我有一些列内容连续,我想删除一些用于中小分辨率的列。但我希望其他列延伸到页面宽度的其余部分。我该如何正确地做到这一点?

我在用

隐藏元素,但是如何包装内容以便在隐藏某些元素时拉伸?

我找到了两种方法,但它们都不起作用:1)我将其作为标准行列,例如:

但在这种情况下,第三列将保持空白。

2)我可以使用这样的块网格来制作它:

但是这次第 4 列只是向左移动到第 3 的位置,并且第四个空间将再次保持空白。

我得到的最接近的是使用 mobile-x-up 类来调整网格以减少移动设备的列 - 这样:

不幸的是,这仅适用于手机,但我也无法将其用于中等分辨率的平板电脑,因为没有等效的。

所以总的来说我的问题是:解决这个问题的最佳方法是什么?在保持网格的同时在较小的屏幕上隐藏元素的最佳方法是什么?是否可以在保持网格正常工作的同时从中等屏幕上的网格中删除元素?

0 投票
3 回答
49979 浏览

css - 如何在 Zurb Foundation 中垂直居中元素?

我正在构建一个登录表单,我希望用户名和密码字段位于屏幕中间。我也在使用 Zurb Foundation 包来构建这个表单。我在垂直居中时遇到了很多麻烦。

这是我的代码:

还有一些我玩过但还没有开始工作的 CSS:

奇怪的是,如果我将某物的高度更改为动态(即height: 30%;)它不起作用,为什么?

0 投票
1 回答
359 浏览

jquery - Anchor tag stripped from URL on form submit

Freeform version: 4.07 ExpressionEngine v2.5.3 - Build Date: 20120911

I have a freeform form inside a jQuery tab. When the form is submitted with erros, the anchor for that tab is stripped from the URL. This takes me back to the first tab and not the tab with the form in. Is there a way to redirect the user back to the form tab?

Thanks

0 投票
2 回答
1202 浏览

ipad - iPad 中未显示 Wordpress Foundations 子菜单

我还是移动/流畅/响应式游戏的新手,并且在此站点上的子菜单上有问题:http ://www.medowsconstruction.com/

移动设备上的点击应该自动替换 :hover 功能,对吗?似乎是标准基金会主题的情况。

我没有更改框架的那些移动特定区域中的任何内容,那么我做了什么来搞砸它并导致子菜单无法在 iPad / touch 上显示?

谢谢你的帮助

0 投票
2 回答
1352 浏览

ruby - Codekit 在安装 zurb-foundation 3 时抛出错误

Codekit/Compass 遇到问题。知道很多人都遇到过这个问题,但我见过的解决方案都没有奏效,我的问题似乎有点不同。我已经安装了 zurb-foundation gem 并用它创建了一个新项目。CodeKit 正在监视这个项目。如果我在终端中编译项目,它似乎做得很好,如果我使用 CodeKit,我会收到这个错误:

“/Library/Ruby/Gems/1.8/gems/zurb-foundation-3.1.1/lib/zurb-foundation.rb 第 2 行的 LoadError:没有要加载的此类文件 --foundation/version”

令人恼火的是,文件 /foundation/version.rb 确实存在于它应该存在的地方!CodeKit 是否以某种方式在错误的地方寻找?(尽管完美地导航到 zurb-foundation.rb 文件?)。

以前有人遇到过这个问题吗?请注意,这与 CodeKit 无法找到 gem 的问题不同,因为它正在找到它但又抛出了另一个错误。

干杯!

0 投票
1 回答
2996 浏览

javascript - Foundation 中的 Google Map API 显示模态显示不正确

可能重复:
Reveal Modal 中的 Google Map API 未完全显示

我有一个位于 Reveal Modal 中的 Google Map API。对于那些不知道那是什么的人来说,它基本上是一个隐藏的容器,当单击按钮时会弹出。我在这个显示模式中有谷歌地图 API,它正在显示,但没有显示所有地图,它只显示了三分之一。

如何让整个地图显示?

我的页面的链接: http: //simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

单击 GOOGLE 地图按钮查看手头的问题

显示模态脚本:

包含 Google Map API 的 Div

单击时显示谷歌地图的按钮

0 投票
5 回答
72119 浏览

javascript - 如何使用 google.maps.event.trigger(map, 'resize')

我是 JS 新手,已经找到了上一个问题的答案,这带来了一个新问题,又把我带到了这里。

我有一个包含 Google Map API 的显示模式。单击按钮时,会弹出显示模式,并显示 Google 地图。我的问题是只有三分之一的地图正在显示。这是因为需要实现调整大小触发器。我的问题是如何实现 google.maps.event.trigger(map, 'resize')?我在哪里放置这个小代码片段?

这是我的测试站点。点击谷歌地图按钮查看手头的问题。 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

显示模型脚本:

我的谷歌地图脚本:

包含谷歌地图的 div:

更新 2018-05-22

随着 Maps JavaScript API 3.32 版中的新渲染器版本的发布,调整大小事件不再是Map类的一部分。

该文件指出

调整地图大小时,地图中心固定

  • 全屏控制现在保留中心。

  • 不再需要手动触发调整大小事件。

来源:https ://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize");从版本 3.32 开始没有任何效果