如何在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.

我只是添加一个类（宽-modal在这个例子中）到模态对话框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添加到no（正面）影响。它就像在Firefox中的魅力一样，在IE8中根本没有效果。我也试过px宽度，没有区别。我确实有respond.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 class但是指向 .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屋！