javascript - 为什么这个对话框的内容表现得如此奇怪？

Question

这是我所说的示例:https://jsfiddle.net/167bqchz/

对话框的边框没有向下延伸到内容之上，内容被“压扁”得非常薄。如果您完全删除内容，边框没问题，一切都如预期，但一旦您在其中放入任何其他内容，它就会再次出现奇怪的行为。

为什么会出现这种行为，我该如何解决？

编辑补充:我在 Arch Linux 上运行 Firefox Aurora(开发者版)。尚未使用任何其他浏览器或操作系统进行测试。

更新:在 Arch Linux 上的 Chromium 上测试过，我也有同样的错误。奇怪的事？在这种情况下，它在 fiddle 中运行良好，但在我的实际站点中根本不起作用，嗯...

截图:

HTML:

<div id="pool-dialog">
    <div class="dual-list list-right col-md-3">
        <h2><i class="fa fa-times"></i>&nbsp;Not Selected</h2>
        <div class="well">
            <ul class="list-group">
                <li class="list-group-item">Testaaaaaaaaaaa</li>
                <li class="list-group-item">Testaaaaaaaaaaaaaa</li>
                <li class="list-group-item">Testaaaaaaaaaaaa</li>
                <li class="list-group-item">Testaaaaaaaaaaaaa</li> 
                <li class="list-group-item">Testaaaaaaaaaa</li>
            </ul>
        </div>
    </div>
</div>

CSS:

.dual-list {
    padding-right: 5px;
    padding-left: 5px;
}

.list-group {
    margin-bottom: 0px;
}

.list-group-item {
    max-height: 30px;
    padding: 5px;
}

.well {
    padding: 10px;
}

.ui-dialog {
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
}

.ui-dialog-titlebar-close {
    float: right;
}

.ui-dialog-titlebar {
    border-bottom: 1px solid black;
}

Answer 1

我自己解决了这个问题。事实证明，我不应该在 div 上有 .col-md-3。我从需要 .col-md-3 的代码的另一部分复制了这段代码，而忽略了将其删除。删除它已修复它。