Question

我试图在引导程序面板中有一个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％的大小，但它既不起作用。

有人可以帮帮我吗？：）

Answer 1

尝试将height:100%添加到.panel-body班级：

jsFiddle

.panel-body {
    height:100%;
}

另外，如果你的min-height课程有.dashboard-panel，那么旋钮在加载时不会缩放，不知道为什么。如果您真的不需要所有仪表板面板具有相同的高度，我可以考虑将其移除。

*修改：向min-height课程添加相同数量的.panel-body似乎已经修复了它。我已经更新了小提琴。

jquery knob响应调整大小在可调整大小的引导程序面板中不起作用

1 个答案: