jquery - 使用 Foundation 5 破坏了 jQuery 旋钮

Question

再会。我正在尝试将 Anthony Terrien 的jquery Knob与 Zurb Foundation 一起使用，但似乎文本输入已损坏。这是一个屏幕截图：

http://i.imgur.com/iaPf1yj.png

如您所见， input[type="text"] 位于页面的左下角。我试图在一个空的 HTML 页面中制作它，它工作得很好，所以我认为问题出在 Foundation 的实现上，但我找不到它的哪个部分破坏了旋钮。

这里的HTML：

<div class="row">
        <div class="medium-12 column bpm">
            <div class="medium-5 medium-centered column">
                    <input type="text" value="100" class="dial">
            </div>
        </div>
    </div>

和 JS：

$('.dial').knob({

    'min': 0,
    'max': 200,
    'angleOffset': 45,
    'fgColor': '#cc0000',
    'font': 'Raleway',
    'fontWeight': '300',
    'thickness': .1
});

Answer 1

好的，我现在想出了一个解决方案。这就是我所做的。在foundation.css 文件中，我编辑了导致问题的display:block。所以我只是用这个：

input[type="text"]:not(.dial){
 /* All Foundation styles go here */
}

Answer 2

更新foundation.css 会随着时间的推移产生更新问题。如果其他人遇到这种情况，我建议申请：

 style="display: inline;" 

或创建一个自定义类并将其应用于旋钮，例如：

.knob-fix{
    display: inline !important; 
}