1

我刚从 4.1 版升级一个月左右，突然我的部分（horozintal-nav）被隐藏在 768px 以上的屏幕尺寸上。在升级之前，它将显示为 768 像素以上的水平导航，并在较小的屏幕上显示为手风琴。

我正在使用指南针和 sass。

我还尝试将他们的示例代码从他们的文档中剪切并粘贴到我的页面顶部，我也得到了相同的行为。

隐藏控件的 CSS...

  /* line 49, ../../../../../lib/gems/1.9.1/gems/zurb-foundation-4.3.1/scss/foundation/components/_section.scss */
  [data-section='horizontal-nav']:not([data-section-resized]):not([data-section-small-style]), .section-container.horizontal-nav:not([data-section-resized]):not([data-section-small-style]) {
    visibility: hidden;
  }

还有其他人有这个问题吗？

4

2 回答 2

1

似乎我只需要将 data-section-resized 属性添加到我的容器中。

<div data-section="horizontal-nav" data-section-resized>...</div>

如此简单的修复，但这不在 zurb 文档中 - 有人知道该属性的用途吗？

于 2013-07-25T09:37:09.907 回答
1

我也遇到了这个问题。上面的答案对我来说不太管用，因为我所有的标签都被挤压到右上角，相互重叠。

该线程帮助我解决了问题： https ://github.com/zurb/foundation/issues/3555

这不是坏的。当元素不可见时，无法正确计算大小。如果你要隐藏它们然后显示，你需要调用 reflow 或触发 resize 事件来计算正确的大小。

至少在我的情况下，我的项目是在 Foundation 能够计算宽度之后加载的，所以它总是为 0。

希望这可以帮助！

于 2013-12-04T07:01:58.593 回答