Twitter bootstrap 3 选择2未正确显示

我有一个引导模式，在该模式中，我试图显示select2控件。控件显示出来，工作正常，但显示不正确。我附上了一个屏幕截图，它是如何呈现为。我还复制并粘贴了完全相同的代码到一个正常的页面，并且显示正确。我检查了border属性以及其他各种css属性，但无法确定为什么会显示这样的内容。有人能给我一些建议，告诉我如何解决这个问题吗

注意：请将结果窗口的宽度最大化，以查看正在处理的问题

Html:

---

编辑：

---

我还想指出的是，存在着对环境的依赖。如果我只使用select2库，我没有看到这个问题。

这似乎与滚动条有关，如果打开开发人员工具，它似乎会自动移动（到正确的位置）。@KevinBrown我打开了开发人员工具，但没有看到移动发生。我还通过css手动将滚动条添加到modal body元素中，但没有看到任何移动。旁注：Select2 4.0.0已退出，如果您处于可以升级的情况，建议使用它。

<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>

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