Bootstrap表单在手机中没有反应

Question

我创建了一个在桌面上看起来不错的登录页面，但在移动设备上很糟糕。表单超出了背景图像的范围，并创建了大量的空白区域。有没有办法让窗体留在背景图片的内部？

谢谢！

这里是一个链接，代码片段：crimsonroot.com/files/php/gettr.php

<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-12 center">  

      <form> 

       <div class="form-group"> 

        <input type="text" class="form-control" name="name" id="name" placeholder="Name"/> 

       </div> 

       <div class="form-group"> 

        <input type="email" class="form-control" name="email" id="email" placeholder="Email"/> 

       </div> 

       <button id="goGettr" class="btn btn-success btn-lg">Make Me A Go Gettr!</button> 

      </form> 

</div> 

Answer 1

修改您.container类这样的：

.container { 
background-attachment: fixed; /* modified here */ 
background-image: url("gettrbackground.jpeg"); 
background-position: center center; 
background-size: cover; 
min-height: 100%; /* modified here */ 
padding-top: 100px; 
width: 100%; 
}