全宽模态渲染不正确

Question

请您看看这个链接，让我知道为什么全宽模式没有放置在页面的中心？

下面是我正在使用的代码：

<div class="container">
<div class="well ">
<button class="btn" data-toggle="modal" href="#dim">Launch Demo</button>
<div id="dim" class="modal container hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Full Width</h3>
</div>
<div class="modal-body">
<p>This modal will resize itself to the same dimensions as the container class.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer 1

在这种情况下，'Full宽度‘将是父容器的全宽度，最大为1170 at，在较窄的视图中则较少。

如果您查看.modal在http://www.promap.ca/Slider/css/bootstrap.min.css中的样式，就会发现它具有

.modal{
position:fixed;
top:10%;
left:50%;
z-index:1050;
width:560px;
margin-left:-280px;

...

}  

我认为左、宽和边距-左的值是造成问题的原因.

尝试编写以下自定义CSS以覆盖默认值，并在主样式表之后加载它。

.modal{
left:0;
width:auto; /* or 100% */
margin-left:0;  
}  

希望这能有所帮助！

Answer 2

我建议您使用引导程序的最新版本，但在这种情况下，您必须覆盖一些样式：

.modal{
    margin-left:auto;
    right:0;
    left:0;
}