![this this](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何在 IE8 中更改 Bootstrap 3 模式的宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我必须支持IE8.模态本身运行良好,但我尝试调整它的大小(在 Firefox 中运行良好)在 IE8 中不起作用.
我只是在模态对话框 div(Bootstrap 结构中的第二个嵌套类)中添加了一个类(在本例中为宽模态)并通过 CSS 应用了一个宽度,没什么特别的.
HTML:
<div class="modal-dialog wide-modal"><div class="modal-content "><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">测试模态</h4>
<div class="modal-body"><img src="content/Example-Infographic.jpg" width="100%"/>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div><!--/.modal-content --></div><!--/.modal-dialog -->
CSS:
.wide-modal {宽度:60%;}
我尝试将类添加到上方和下方的 div 中,但没有(正面)效果.它在 Firefox 中的作用就像一个魅力,在 IE8 中根本没有效果.我也试过 px 宽度,没有区别.我确实有 response.js 库,所以一般来说 IE8 的行为与此不同.
解决方案
在 bootstrap 3 中,你需要分配宽度不是 .modal
类,而是 .modal-dialog
#modalTest .modal-dialog{宽度:500px;/* 你的宽度 */}
I have to support IE8. The modal itself works fine, but my attempts to resize it (which work fine in Firefox) don't work in IE8.
I'm just adding a class (wide-modal in this example) to the modal-dialog div (the 2nd nested one in the Bootstrap structure) and applying a width via CSS, nothing fancy.
HTML:
<div class="modal fade" id="modalTest" role="dialog">
<div class="modal-dialog wide-modal">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Testing Modal</h4>
</div>
<div class="modal-body">
<img src="content/Example-Infographic.jpg" width="100%" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
CSS:
.wide-modal {
width: 60%;
}
I tried adding the class to the div above and below to no (positive) effect. It works like a charm where it is in Firefox, just no effect at all in IE8. I also tried with a px width, no difference. I do have the respond.js library in place so in general IE8 is behaving other than this.
解决方案
In bootstrap 3 you need assign width not to .modal
class but to .modal-dialog
#modalTest .modal-dialog
{
width: 500px; /* your width */
}
这篇关于如何在 IE8 中更改 Bootstrap 3 模式的宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!