Проблема с дизайном Html на маленьких экранах, Twitter Bootstrap Пользовательский вход

Question

Моя основная проблема заключается в шаблоне страницы входа в систему, который я скопировал, и любой идеи, как ее исправить?

Я скорректировал ширину коробки, потому что она слишком широка для моего проекта. Я добавил определенную ширину, установив модальный диалог в ширину 450 пикселей. modal-dialog { width:450px; }. Он теперь в браузере, но почему это происходит, когда я просматриваю его на небольших устройствах, например iphone4, теперь он не реагирует?

<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h1 class="text-center">Login</h1> 
</div> 
<div class="modal-body"> 
<form class="form col-md-12 center-block"> 
<div class="form-group"> 
<form method="POST" action="login.php"> 
<input type="text" class="form-control input-lg" placeholder="Username"> 
</div> 
<div class="form-group"> 
<input type="password" class="form-control input-lg" placeholder="Password"> 
</div> 
<div class="form-group"> 
<button class="btn btn-primary btn-lg btn-block">Sign In</button> 
<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span> 
</div> 
</form> 
</div> 
<div class="modal-footer"> 
<div class="col-md-12"> 
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
</div> 
</div> 
</div> 
</div> 
</div> 

Answer 1

Ну, как вы сказали, что вы настроили свой модальный-диалог быть:

.modal-dialog { width:450px; } 

Это не отвечает, что это фиксированный - вам нужно добавить другие ширины к вашему модальный диалог в запросах медиа блоки начальной загрузки

Eg:

@media (min-width: 768px) { 
.modal-dialog { width: 300px; } 
} 

Обратите внимание приведенный выше код для примера, а не точное гр вам нужно, потому что вам нужно выяснить, что лучше для вашего проекта.