如何在IE8中更改Bootstrap 3模式的宽度？

我必须支持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中完全没有效果。 我也尝试了一个像素宽度，没有区别。 我确实有了respond.js库，所以通常IE8的行为不是这样。

Answer 1

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

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

Answer 2

我使用CSS和jQuery的组合，以及在这个页面上的提示，使用Bootstrap 3创build一个stream体的宽度和高度。我也在Win7上的IE8上testing了这个，它工作的很好。

首先，一些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/上完整的书写和代码;

Answer 3

我知道这是迟到，但刚刚在bs3文档中find，你可以添加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> 

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

Answer 5

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

Answer 6

我认为你需要设置像素的宽度，并调整左边距。 例如，

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

左边的余量必须是模式宽度的一半，滚动条减去30px。

以下是关于Bootply的一个例子： http ://bootply.com/85213