Bootstrap3模式对话框和响应式布局

Question

我的基于Bootstrap3的模态对话框弹出代码看起来像

<div id="responsive" class="modal fade" data-width="360" tabindex="-1" style="display: none; background:#57C1E9">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Search</h4>
    </div>
    <div class="modal-body">
        <div class="row">
        <form>
            <label for="keywords">Search</label>
            <input type="text" name="keywords" id="keywords" placeholder="Search" />
            <button type="submit" name="submit"><i class="icon-chevron-right"></i></button>
          </form>
        </div>
    </div>
</div>

演示：http://www.bootply.com/125674

我已根据此处的说明“https://github.com/jschr/bootstrap-modal/附加了所有文件，但不知何故，对话框在响应式布局上调整为全宽。

任何线索我错过了什么？ modal.js现在是否在Boostrap3中构建？

由于