為什么我的代碼沒有在移動視圖中覆蓋整個屏幕，它只覆蓋了屏幕的一半
[英]why my code is not covering the whole screen in mobile view its is only covering half of the screen
問題描述
請幫我解決這個代碼。 它在 PC 中看起來很棒，但在移動視圖中只覆蓋了一半的屏幕。 請指導我解決這個問題。 下面是我的 HTML 和 CSS 代碼。 我將非常感謝您的幫助。 我認為容器流體類存在一些問題，因為它沒有覆蓋整個屏幕
body{ /* background: no-repeat fixed url(../images/background.png); */ font-family: 'open Sans'; color: white; } /* Navbar section */ .container-fluid{ background: no-repeat fixed url(../images/background3.png); background-size: cover; padding: 8% 15%; height: 710px; } .navbar-light{ background-color: #78c9cb; color: grey; font-size: 200%; } /* Create Account Section */ .card{ max-width: 800px; padding: 0; text-align: center; /* margin-top: 10%; */ } .create{ font-size: 3rem; padding:0; font-weight: bolder; } .form-group{ padding: 0.8rem; } @media (max-width:800px) { .container-fluid{ padding: 20% 15%; } body{ max-height: 100%; } }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- CSS stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <!-- Google Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700"> <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <title></title> </head> <body> <!-- Navigation bar --> <header id="Head"> <div class="container-fluid"> <nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon"> </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#news">News</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact Us</a> </li> </ul> </div> </nav> <!-- Registration --> <div class="row "> <div class="card bg-dark mx-auto"> <div class="card-header"> <h2 class="create">Create Account</h2> </div> <div class="card-body"> <form class="" action="login.php" method="post"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input name="username" class="form-control" placeholder="User name" type="text"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-envelope"></i> </span> </div> <input name="email" class="form-control" placeholder="Email address" type="email"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input name="password" class="form-control" placeholder="Password" type="password"> </div> <input type="submit" class="btn btn-primary btn-block" name="submit" value="Create Account"> <p>Have an account?<a href="login.php">Log In</a> </p> </form> </div> </div> </div> </div> </header> </section> <!-- JavascriptTags --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
0 2020-09-26 15:28:22
為iPhone添加此樣式@375px 媒體查詢
@media only screen and (max-width:375px) {
#Head .container-fluid{
padding: 0;
}
}
工作演示
body{ /* background: no-repeat fixed url(../images/background.png); */ font-family: 'open Sans'; color: white; } /* Navbar section */ .container-fluid{ background: no-repeat fixed url(../images/background3.png); background-size: cover; padding: 8% 15%; height: 710px; } .navbar-light{ background-color: #78c9cb; color: grey; font-size: 200%; } /* Create Account Section */ .card{ max-width: 800px; padding: 0; text-align: center; /* margin-top: 10%; */ } .create{ font-size: 3rem; padding:0; font-weight: bolder; } .form-group{ padding: 0.8rem; } @media (max-width:800px) { .container-fluid{ padding: 20% 15%; } body{ max-height: 100%; } } @media only screen and (max-width:375px) { #Head .container-fluid{ padding: 0; } }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- CSS stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <!-- Google Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700"> <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <title></title> </head> <body> <!-- Navigation bar --> <header id="Head"> <div class="container-fluid"> <nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon"> </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#news">News</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact Us</a> </li> </ul> </div> </nav> <!-- Registration --> <div class="row "> <div class="card bg-dark mx-auto"> <div class="card-header"> <h2 class="create">Create Account</h2> </div> <div class="card-body"> <form class="" action="login.php" method="post"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input name="username" class="form-control" placeholder="User name" type="text"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-envelope"></i> </span> </div> <input name="email" class="form-control" placeholder="Email address" type="email"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input name="password" class="form-control" placeholder="Password" type="password"> </div> <input type="submit" class="btn btn-primary btn-block" name="submit" value="Create Account"> <p>Have an account?<a href="login.php">Log In</a> </p> </form> </div> </div> </div> </div> </header> </section> <!-- JavascriptTags --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
為什么我的導航欄沒有覆蓋整個屏幕？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.