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">×</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
http://segmentfault.com/q/1010000000594810