表单未响应移动布局中的单击

所以我有我的网站：https://enigmatic-woodland-92793.herokuapp.com/大部分都启动并运行，问题是从 chrome 开发工具中的 768px 和 360px（我的手机大小）视口查看时，注册和登录页面的表单不起作用。

我添加了元标记

    <!DOCTYPE html>
<html>
    <head>
        <title>WorldScoop</title>
        <!-- <link rel="stylesheet" type="text/css" href="../public/assets/css/reset.css"> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
        <link rel="shortcut icon" href=/assets/images/favicon.jpg type="image/x-icon" />
        <meta name="viewport" content="width=768"/>
        <!-- <meta name="viewport" content="width=360"> -->
    </head>

这给了我想要的布局，但是登录和注册的表单在单击时没有响应。

这是我的表单的 html：

<div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 lorem">
            <div class="about">
                <form action="/login" method="post" style="padding-top: 20px" >
                    <div class="form-group">
                        <label>username</label>
                        <input type="text" class="form-control" name="email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" name="password" class="form-control">
                        <a href="#" style="color:blue">forgot password?</a>
                    </div>
                    <div>
                        <input type="submit" value="Submit" class="form-control">
                    </div>
                    <!-- <button type="button" class="btn btn-primary">Submit</button> -->
                </form>
            </div>
        </div>
    </div>

和媒体查询：

@media handheld, screen and (max-width: 768px){
    /*.container{*/
        /*width: 100%;*/
        /*height: 100%;*/
    /*}*/
    .secondbipsum{
        position: relative;
        padding-left: 50px;
    }
    #profcard{
        /*position: absolute;*/
        width: 400px;
        /*margin*/
    }
    .dropdown{
        position: absolute;
        left: -100px;
    }
    #savedArticles{
        width: 300px;
    }
    #rightside{
        width: 300px;
    }
    #nav-profile{
        position: fixed;
        top: -20px;
    }
    .navbar{
        max-width: 768px;
        position: absolute;
        top: -15px;
    }

    .about{
        position: absolute;
        width: 780px;
        height: 330px;
        padding-top: 10px;
        padding-left: 30px;
        padding-right: 50px;
        background-color: #03B3CE;
        margin-top: 230px;
        right: -12px;
        top:0px;
        /*margin-right: 10px;*/
        float: right;
        z-index: 0;
    }
    .carousel{
        position: absolute;
        width: 768px;
        height: 600px;
        margin-top: 85px;
        right: 0px;
        clear: right;
        float: right;
        z-index: 0;
    }
    .bipsum{
        width: 768px;
        position: relative;
        height: 920px;
    }

    .lorem{
        position: absolute;
        width: 100%;
        margin-top: 400px;
        z-index: -1;
    }
    #title{
        margin-left: 5px;
    }
    #desc{
        margin-left: -40px;
        text-align: left;
    }
    .nav-item{
        font-size: 11px;
    }
    .fa-sign-out{
    /*margin-top: 10px;*/
    margin-right: 80px;
    text-decoration: none;
    padding: 10px;
    position: absolute;
    left: 0px;
    bottom: 30px;
    }
}

我在互联网上搜索了很长时间，找不到任何适合我的问题。

执行以下更正：

.lorem更改 z 索引和顶部边距，以便您在 768px 下拥有此 CSS：

.lorem {
    position: absolute;
    width: 100%;
    margin-top: 640px;
    z-index: 0;
    height: auto;
}

对于.about完全删除 768px 以下的边距顶部

我只建议进行这些更正以避免您遇到的问题，但更好的建议是重新考虑整个网站，因为 HTML/CSS 写得非常糟糕！

我想

你可以看看开发工具，".frontipsum"div与表单部分重叠。

相关内容

最新更新

热门标签：