如何在 IE8 中更改 Bootstrap 3 模态的宽度？答案

【问题标题】：How can I change the width of a Bootstrap 3 modal in IE8?如何在 IE8 中更改 Bootstrap 3 模态的宽度？
【发布时间】：2013-08-23 03:54:03
【问题描述】：

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

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

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 的行为不是这样。

【问题讨论】：

标签： internet-explorer-8 modal-dialog twitter-bootstrap-3

【解决方案1】：

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

#modalTest .modal-dialog
{
    width: 500px; /* your width */
}

【讨论】：

哇，这是怎么工作的？覆盖？这是引导程序吗？我使用 % 使其具有响应性
这很重要。为 Bootstrap 3 使用“.modal-dialog”！
谢谢这让我发疯了
这是最简单的方法。应标记为答案。
我只希望它在大屏幕上变大，所以使用：@media only screen and (min-width : 1224px) { #modalTest .modal-dialog { width: 45%;/* 你的宽度 * / } }

【解决方案2】：

我结合使用 CSS 和 jQuery 以及此页面上的提示，使用 Bootstrap 3 创建了流畅的宽度和高度。我还在 Win7 上的 IE8 上进行了测试，效果很好。

首先，一些 CSS 来处理内容区域的宽度和可选滚动条

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

如果需要的话，然后一些 jQuery 来调整内容区域的高度

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

完整的文章和代码在 http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

【讨论】：

【解决方案3】：

我知道已经很晚了，但刚刚在 bs3 docs 中找到，您可以将 modal-lg 类添加到您的模态中

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
  Large modal
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
     ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
  Small modal
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
   <div class="modal-content">
     ...
   </div>
 </div>
</div>

【讨论】：

最佳答案 - 只有一个使用 BS3 内置选项，最快的一个

【解决方案4】：

这当然会改变所有模态窗口的宽度，但它可能会让你更好地了解它是如何工作的。我只是以这种方式更改了我的模态窗口。

    .modal-body {
        position: relative;
        padding: 20px;
        min-width: 800px; /* SET THE WIDTH OF THE MODAL */
    }

    .modal-content {
        position: relative;
        background-color: #fff;
        border: 1px solid #999;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 6px;
        outline: 0;
        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        background-clip: padding-box;
        width: 900px; /* SET THE WIDTH OF THE MODAL */
        margin: 50px 0 0 -150px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH */
    }



<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <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">
          ...
        </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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

【讨论】：

【解决方案5】：

#modalTest.modal-dialog{
    width: <insert size> !important;
}
the !important is important :v

【讨论】：

或者你可以在正文中添加一个类并制作：#class_body .modal-dialog { width: 60% ; }

【解决方案6】：

我认为您需要以像素为单位设置宽度并调整左侧边距。例如，

.modal-dialog {
    width:700px;
    margin-left:-320px;
}

左边距必须是模态框宽度的一半，滚动条减去 30px。

这是 Bootply 上的一个示例：http://bootply.com/85213

【讨论】：