如何在 IE8 中更改 Bootstrap 3 模态的宽度? [英] How can I change the width of a Bootstrap 3 modal in IE8?

问题描述

我必须支持 IE8.模态本身工作正常，但我尝试调整它的大小(在 Firefox 中工作正常)在 IE8 中不起作用.

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.

我只是在模态对话框 div(Bootstrap 结构中的第二个嵌套)中添加一个类(在本例中为宽模态)，并通过 CSS 应用宽度，没什么特别的.

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">&times;</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%;
}

我尝试将类添加到上方和下方的 div 中，但没有(积极)效果.它在 Firefox 中就像一个魅力，在 IE8 中根本没有效果.我也尝试了 px 宽度，没有区别.我确实有 response.js 库，所以总的来说 IE8 的行为不是这样.

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.

推荐答案

在 bootstrap 3 中，您需要将宽度分配给 .modal 类而不是 .modal-dialog

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 模态的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！