Question

一些先决条件：

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

在桌面上，您会看到Zurb基金会4提供的蓝色和绿色下拉按钮。

我们正在使用带有SASS nuget包的Zurb Foundation的ASP.net MVC。

问题：

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

我做了一些研究并找到了与下拉问题有关的帖子，但它们都是一个稍微不同的问题（下拉显示出来的方式），并且是在旧版本的基础4上。我正在使用4.3.1由Nuget包提供。我已经读过关于下拉列表的问题已经从4.1.6开始解决了，主要是根据这个主题：

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

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

是否有人遇到此问题或能提供一些见解？非常感谢所有回复的人。

Answer 1

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

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

它应该解决你的问题

Answer 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

基础4下拉按钮显得太高

2 个答案: