Question

请你看一下THIS LINK，让我知道为什么全宽模态没有放在页面的中心？

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

<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

在这种情况下，'全宽'将是父容器的最大宽度，最大值为1170px，在较窄的视口处较少。

如果你在http://www.promap.ca/Slider/css/bootstrap.min.css中查看.modal的样式，你会发现它已经

.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

我建议你使用最新版本的bootstrap，但在这种情况下你必须覆盖一些样式：

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

全宽模态无法正确渲染

2 个答案: