使用 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 */
}