0

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

这是我正在使用的代码：

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

2 回答 2

4

在这种情况下，“全宽”是父容器的全宽，最大为 1170 像素，在较窄的视口处更小。

如果您在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;

...

}

我认为 left、width 和 margin-left 值导致了问题。

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

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

希望这可以帮助！

于 2013-07-27T20:26:22.203 回答
1

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

.modal{
    margin-left:auto;
    right:0;
    left:0;
}
于 2013-07-27T20:25:36.157 回答