全寬模態不能正確渲染

您可以看看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>

來源

2013-07-27 Mona Coder

模態對話框的寬度在bootstrap的CSS中設置。如果您更改'width'，則還需要將'margin-left'設置爲適當的值。檢查這個問題的更多細節：[http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box](http:/ /stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box） –

「全寬」在這種情況下，將是父容器的最大寬度爲1170px，在較窄的視口處更少。

如果您查看.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; 
}

希望這有助於！

來源

2013-07-27 20:26:22

好的答案，這是一個很好的工作小提琴。 http://jsfiddle.net/sulfureous/6hYPZ/ – sulfureous

非常感謝jsFiddle @sulfureous –

您使用最新版本的引導，但在這種情況下，你必須覆蓋一些樣式：

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

來源

2013-07-27 20:25:36 codedme

感謝Codeme與您評論的唯一問題是模態更改的大小當小窗口重新調整大小到小portview –

全寬模態不能正確渲染

回答

相關問題