Полная ширина Модально не визуализируется должным образом

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

«Полная ширина» в этом случае это была бы полная ширина исходного контейнера, максимальная - 1170 пикселей, меньше в более узких видовых экранах.

Если вы посмотрите на стиль для .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; 
}