Question

我目前正在使用最新版本的bootstrap，我已经创建了一个登陆页面。但是，成功按钮无法在13英寸/ 15英寸笔记本电脑和台式机上点击，这很奇怪。

网址为here。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
        <meta name="author" content="nivekyo">
        <link rel="icon" href="img/favicon.ico">
        <title>Loot.es - CSGO SMS Service</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
        <link href="css/landing.css" rel="stylesheet" >
    </head>
    <body>
        <div class="container">
            <h1 class="title">The notification we've all been waiting for.</h1>
            <p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
            <div class="left"><img class="bubble" src="img/speech.png"/></div>
            <p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
        </div>
        <footer class="footer">
            <div class="container">
                <p class="text-muted">
                    <a href="../privacy">Privacy Policy</a> | <a href="https://twitter.com/nivekyo">@nivekyo</a>
                </p>
            </div>
        </footer>
    </body>
</html>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@media (min-width: 1200px) {
    .container {
        width: 560px;
        padding-top: 200px;
    }
}
html {
    position: relative;
    min-height: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 50px;
}
.container {
    text-align: center;
}
.title {
    font-family: 'Open Sans Condensed', sans-serif;
}
.join {
    padding-top: 30px;
}
a:hover {
    text-decoration: none;
}
img.bubble {
    padding-top: 20px;
    width: auto; 
    height: 180px;
}
.left {
    text-align: left;
}

非常感谢！

Answer 1

这不是因为15＆＃34;屏幕，但这是因为padding和footer上的.container。解决方案：

footer, footer .container {padding-top: 0;}

将上述代码添加到landing.css。

奇怪的CSS问题：按钮在13英寸/ 15英寸屏幕中不起作用

1 个答案: