BootStrap modal() 如何根据返回的HTML宽度自动调整宽度？

Question

如何让modal()根据返回的内容自动调整宽度？

#bootstrap request


<script type="text/javascript">


$.get('index.php',function(html){

    $('body').append(html);
    $('#ajaxHtml').modal('show'); #如果让这个ajaxHtml div自动调整宽度？

})
</script>

//index.php
<div id="ajaxHtml">
    <table border="1" width=100%>
        <tr>
            <td>ID</td>
            <td>Name</td>
        </tr>
    </table>
</div>

Answer 1

$('#ajaxHtml').on('show', function() {//捕获show事件
//获取html宽度
//调整modal宽度
})

Answer 2

首先声明，如果真的这么做了也就失去了 bootstrap 多分辨率适配的好处。bootstrap 的 modal 窗口能够自动在不同分辨率下用不同的宽度，这就是它的特色呢。

以默认大小的 modal 为例，要做改变宽度其实只需要在 .modal-dialog 样式上做文章就行了。为了简单，我现在直接写在元素标签上了。

关键三点：

• 用 display: inline-block；
• 父节点用 text-center 样式居中；
• 重置宽度 width: auto

HTML 代码：

<div id="dialog" class="modal fade text-center">
  <div class="modal-dialog" style="display: inline-block; width: auto;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>                                                                                                                                                                                                                                      
</div>
<script