Select2无法正常显示

Question

我有一个Bootstrap Modal，我试图在其中显示一个select2控件。控件显示，它运行良好，但无法正常显示。我附上了如何渲染的截图。我还将完全相同的代码复制并粘贴到常规页面，并且正确显示。我检查了border属性以及其他各种css属性，但我无法确定它为什么显示这样。谁能给我一些关于如何解决这个问题的指示？

JsFiddle showing the issue 注意：请最大化结果窗口的宽度以查看操作中的问题。

HTML：

<form class="form-horizontal">
<div class="form-group">
    <label class="col-sm-3 control-label">Country</label>
    <div class="col-sm-6">
        <select class="js-example-basic-single form-control">
            <option></option>
            <option>Canada</option>
            <option>Mexico</option>
            <option>United States</option>
        </select>
    </div>
</div>
</form>

使用Javascript：

$('.js-example-basic-single').select2({
    placeholder: "Select country..."
});

修改

我还想指出select2-bootstrap library存在依赖关系。如果我只使用select2库，我不目睹了这个问题。