Question

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

我正在使用指南针和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;
  }

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

Answer 1

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

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

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

Answer 2

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

这个帖子帮助我解决了这个问题： https://github.com/zurb/foundation/issues/3555

这没有打破。当元素不可见时，无法正确计算大小。如果你要隐藏它们然后显示，你需要调用reflow或者激活resize事件来计算正确的大小。

至少在我的情况下，我的物品在基金会能够计算宽度后被加载，所以它总是变为0。

希望这有帮助！

升级到zurb foundation 4.3和现在隐藏在大屏幕尺寸上的部分

2 个答案: