我试图在引导面板中设置一个 jQuery 旋钮小部件,以便在面板本身调整大小时自动调整大小(感谢 jQuery UI 可调整大小)。
HTML:
<div class="col-md-3">
<div class="panel panel-info dashboard_panel">
<div class="panel-heading">HELLO 2</div>
<div class="panel-body">
<input type="text" class="dial" id="knob1" data-min="-50" data-width="100%" data-height="50%" data-max="50"></input>
<button class="button button-default">Just a button</button>
</div>
</div>
</div>
</div>
JS:
$(".dashboard_panel").resizable();
$(".dial").knob();
CSS:
.dashboard_panel {
min-height: 200px;
}
这是代码的链接:jsFiddle
我期望旋钮小部件的初始高度为 100 像素高度(父元素的 200 像素最小高度的 50%),但事实并非如此。然后我期望高度总是大小的 50%,但它也不起作用。
有人能帮助我吗 ?:)