php - 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%;
}