我已将网站设为响应式，但当我在移动设备或小屏幕上时，右侧会出现一条奇怪的线 image of the screen
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html
{
scroll-behavior: smooth;
}
body
{
overflow-x: hidden;
color: #505962;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.navbar
{
text-transform: uppercase;
}
.navbar-brand
{
height: 2.4rem;
}
.home-inner
{
background-image: url('../img/imac-on-white-table.jpg');
opacity: 0.3;
}
.caption
{
width: 100%;
position: absolute;
top: 40%;
z-index: 1;
}
.caption h3
{
color: white;
font-size: 2.4rem;
padding-bottom: 2rem;
}
h3.heading
{
text-align: center;
font-size: 1.9rem;
text-transform: uppercase;
margin-bottom: 1.9rem;
}
.card
{
margin: 2rem;
}
.card-img-top
{
-webkit-filter: grayscale(90%);
filter: grayscale(90%);
}
.footer .row
{
background-color: #505962;
padding: 1rem 2rem 3rem;
color: #57C4DF;
}
.footer h3
{
height: 2rem;
margin: 1.5rem 0;
}
.sm
{
font-size: 1.5rem;
margin-top: .5rem;
padding-left: .5rem;
}
.fa-facebook
{
color: #2733D9;
}
.fa-linkedin
{
color: #4875B4;
}
.fa-instagram
{
color: #4E433C;
}
.fa:hover
{
text-decoration: none;
}
.skillname
{
margin-top: 1rem;
margin-bottom: 0;
}
.skills
{
width: 100%;
background-color: #ddd;
border-radius: 5px;
}
.skill
{
text-align: right;
padding: 10px;
color: white;
border-radius: 5px
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive{
0% { width: 0%; }
}
.html {width: 90%; background-color: #4CAF50;}
.css {width: 70%; background-color: #2196F3;}
.js {width: 80%; background-color: #B8860B;}
.symf {width: 65%; background-color: #32CD32;}
.php {width: 70%; background-color: #808080;}
.java {width: 40%; background-color: #FFA500;}
.landing
{
position: relative;
width: 100%;
height: 100vh;
display: table;
background: #E9ECEF;
z-index: -1;
}
.home-wrap
{
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.home-inner
{
position: fixed;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Dustin Timmermans </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-target="#menu">
<div id="home">
<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">
<div class="container-fluid">
<a href="#" class="navbar-brand">Dustin Timmermans</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
<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="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hobbies">Hobbies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="landing">
<div class="home-wrap">
<div class="home-inner">
</div>
</div>
</div>
<div class="caption center-block text-center">
<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>
<h4 style="font-family: Righteous;">Portfolio</h4>
</div>
<div id="about">
<div class="jumbotron">
<h3 class="heading">About</h3>
<div class="row">
<div class="col-md-4 text-center">
<h4>Who am I</h4>
<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able
to conversate in German.
</p>
</div>
<div class="col-md-4 text-center">
<h4>Skills</h4>
<p class="progress">
<p class="skillname">HTML5.0/TWIG</p>
<div class="skills">
<div class="skill html">90%</div>
</div>
<p class="skillname">CSS3.0</p>
<div class="skills">
<div class="skill css">70%</div>
</div>
<p class="skillname">JavaScript</p>
<div class="skills">
<div class="skill js">80%</div>
</div>
<p class="skillname">Symfony 3.4</p>
<div class="skills">
<div class="skill symf">65%</div>
</div>
<p class="skillname">PHP 7</p>
<div class="skills">
<div class="skill php">70%</div>
</div>
<p class="skillname">Java</p>
<div class="skills">
<div class="skill java">40%</div>
</div>
</p>
</div>
<div class="col-md-4 text-center">
<h4>Why me</h4>
<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>
</div>
</div>
</div>
</div>
<div id="hobbies">
<h3 class="heading">Hobbies</h3>
<div class="row padding">
<div class="col-md-4">
<div class="card text-center">
<img src="img/motor.jpg" class="card-img-top">
<div class="card-body">
<h4>Motorcycle racing</h4>
<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center">
<img src="img/me.jpg" class="card-img-top">
<div class="card-body">
<h4>Piano</h4>
<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center">
<img src="img/karten.jpg" class="card-img-top">
<div class="card-body">
<h4>Karting</h4>
<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container-fluid footer">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h3>Dustin Timmermans</h3>
<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>
<strong>Social Media</strong><br>
<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>
<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>
<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>
<br><br>
<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我尝试了很多东西，但我不知道如何解决这个问题。我从来没有遇到过这样的问题，也找不到任何类似的问题或问题。代码没有进一步的问题，这是我唯一的问题
最佳答案
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 0 !important;
}
.row
{
margin-right: 0 !important;
}
这不是修复它的正确方法，而是快速而肮脏的方法
关于html - 在手机上查看时，右侧出现奇怪的线条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54013541/