Foundation 4 下拉按钮显示太高答案

【问题标题】：Foundation 4 dropdown button appearing too highFoundation 4 下拉按钮显示太高
【发布时间】：2013-10-17 02:19:44
【问题描述】：

一些先决条件：

大家好，首先让我引导您访问相关网站： http://hws-1.apphb.com/Account/Smartplan

在表格顶部，您会注意到 Zurb's Foundation 4 提供的蓝色和绿色下拉按钮。

我们将 ASP.net MVC 与 Zurb Foundation w/SASS nuget 包一起使用。

问题：

如果您单击下拉按钮，您会注意到它们出现在按钮的中间。预期的功能是从它们下方开始，如 zurb 下拉按钮文档中所示。

我做了一些研究并找到了与下拉问题相关的帖子，但它们都是一个略有不同的问题（下拉显示方式），并且是在基础 4 的旧版本上。我正在使用4.3.1 由 Nuget 包提供。我已经读到，自 4.1.6 以来，有关下拉列表的问题已根据此线程得到解决：

https://github.com/zurb/foundation/issues/1789

我正在寻找导致此问题的原因，而不是硬编码 CSS 值以将其推得更远。过去几天我一直在尝试多种修复方法，但没有任何效果。

有没有人遇到过这个问题或者可以提供一些见解？非常感谢所有回复的人。

【问题讨论】：

标签： jquery css sass zurb-foundation

【解决方案1】：

我知道计算实际上是在 javascript 中完成的，但作为一种快速解决方法，请转到您的 CSS 文件

.f-dropdown {
    margin-top: 33px;
}

它应该可以解决你的问题

【讨论】：

谢谢，我知道硬编码的 CSS 解决方案，但更愿意将其用作最后的努力。我担心它可能会对整个网站产生其他影响。我很好奇问题是否出在 div 嵌套的数量之内......再次感谢
这是一个可靠的解决方法。只需确保确定 CSS 的范围，使其仅影响您尝试移动的特定下拉列表，这不会对站点范围产生任何影响。例如：div#your_element_id.f-dropdown { margin-top: 10px }

【解决方案2】：

我看到你的源代码... 问题是 zepto.js 覆盖了一些 dropdown.js 协议..

删除你的 zepto.js

   <script src="https://media.hardworkingsoftware.com/Scripts/zepto.js"></script>

当您使用基础时，请在需要时添加 zepto.js..

   <script>
   document.write('<script src=https://media.hardworkingsoftware.com/Scripts/'
   + ('__proto__' in {} ? 'zepto' : 'jquery')
   + '.js><\/script>');
   </script>

更多信息请查看此链接http://foundation.zurb.com/docs/javascript.html

【讨论】：

我一定是看错了文档，我以为它说需要 Zepto 才能运行某些组件，但似乎 Jquery 会处理所有这些。