BootStrap modal() 如何根據返回的HTML寬度自動調整寬度？

首先聲明，若是真的這麼作了也就失去了 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">&times;</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</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 

 

 

 

http://segmentfault.com/q/1010000000594810