Internet explorer 8 如何更改IE8中引导3模式的宽度？

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

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

HTML:

---

我试着在div上下添加这个类，但没有（积极的）效果。在Firefox中，它就像一个魔咒，在IE8中完全没有效果。我还尝试了px宽度，没有区别。我确实有respond.js库，所以通常IE8的行为与此不同。

这当然会改变所有模式窗口的宽度，但它可能会让您更好地了解其工作原理。我只是这样改变了我的模态窗口

    .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 -->

。模态体{
位置：相对位置；
填充：20px；
最小宽度：800px；/*设置模式的宽度*/
}
.模态内容{
位置：相对位置；
背景色：#fff；
边框：1px实心#999；
边框：1px实心rgba（0,0,0,0.2）；
边界半径：6px；
大纲：0；
-网络工具包盒阴影：0 3px 9px rgba（0,0,0,0.5）；
盒影：0 3px 9px rgba（0,0,0,0.5）；
背景剪辑：填充框；
宽度：900px；/*设置模式的宽度*/
边距：50px 0-150px；/*更改边距以适应新宽度*/
}
&时代；
情态标题
...
接近
保存更改

我认为您需要设置宽度（以像素为单位）并调整左边距。比如说,

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

左边距必须是模式宽度的一半，滚动条的宽度减30像素

---

下面是一个关于Bootply的示例：

在bootstrap3中，您需要将宽度分配给

.modal

类，而不是

.modal dialog

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

#modalTest.modal-dialog{
宽度：！重要；
}
这个重要的是重要的：v

我使用CSS和jQuery的组合以及本页上的提示，使用Bootstrap3创建了一个流畅的宽度和高度。我还在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);
});

完整的编写和代码在

---

我知道时间已经晚了，但刚刚在中找到，您可以将

模态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>

大模态
...
小模态
...

哇，这是怎么回事？覆盖？这是自举吗？我用%来让它有反应这很重要。使用“.modal dialog”进行引导3！谢谢这让我抓狂这是最简单的方法。应该被标记为答案。我只希望它在更大的屏幕上更大，所以使用：@media only screen和（最小宽度：1224px）{#modalTest.modal dialog{width:45%；/*your width*/}}或者你可以在主体中添加一个类，这样做：#class_body.modal dialog{width:60%；}best answear-只有一个使用BS3内置选项，而且是最快的

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

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

<!-- 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>