为什么我的网站右侧有一个空白区域？
[英]Why is there a white space on the right side of my website?
问题描述
我有一个网站，页面右侧有一个空白区域。 它使页面可以水平滚动。 我添加了overflow: hidden到 css。当 web 在 Chrome 中打开时，它工作得很好。 然而，当我尝试用 safari 或手机打开它时，空白又回来了。
网站截图可以在这里看到： https://drive.google.com/file/d/1UryAukJhRS4yTHBPuJ8F_3uqeVcdWrln/view?usp=sharing
我的 html：
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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="{% static 'web/style.css' %}">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eximia Denim Co.</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="{% url 'web:index' %}" id="brand-name">Eximia Denim Co.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <a class="brand" style="margin: 0; float: none; text-align:center" href="#">
<img src="https://i.imgur.com/GyjZFjL.png" width="100px" />
</a> -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'web:index' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'web:about' %}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'web:contact' %}">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shopee.co.id/shop/292750693/">Order</a>
</li>
</ul>
</div>
</div>
</nav>
<section id='highlight-1'>
</section>
<a href="https://shopee.co.id/shop/292750693/">
<img src="{% static 'web/images/promo2020.jpg' %}" id="promo-1">
</a>
<section id='cards-1'>
<div class="row">
<div class="col-md-6" id="card-1">
<h1>Unique. Soft.</h1>
<img src="{% static 'web/images/soft.jpg' %}"class="center">
</div>
<div class="col-md-6" id="card-2">
<h1>Fashionable. Tough.</h1>
<img src="{% static 'web/images/hard.jpg' %}" class="center">
</div>
</div>
</section>
<section>
<img src="{% static 'web/images/new-product-banner.jpg' %}" id="new-product">
</section>
<footer class="footer">
<br>
<div class="row justify-content-center">
<a href="https://www.instagram.com/eximia.denim/" class="fa fa-instagram fa-2x"></a>
<a href="https://wa.me/628114538300" class="fa fa-whatsapp fa-2x"></a>
</div>
<div class="footer-copyright text-center py-3">
© 2020 Copyright
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
样式.css：
.navbar {
position: absolute;
min-height: 70px;
}
.navbar a {
font-size: 20px;
color: white !important;
font-weight: lighter;
text-decoration: none;
transition: 0.3s;
}
.navbar a:hover {
opacity: 0.5;
}
body {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#brand-name {
font-size: 24px;
font-weight: normal;
text-decoration: none;
}
#highlight-1 {
height: 100vh;
background-image: url("images/highlight-1.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
}
#promo-1 {
max-width: 100%;
}
#cards-1 {
width: 100%;
}
#cards-1 #card-1 {
text-align: center;
height: 100%;
background-color: #f4b41a;
}
#cards-1 #card-1 h1 {
padding-top: 40px;
color: #143d59;
}
#cards-1 #card-2 {
text-align: center;
height: 100%;
background-color: #143d59;
}
#cards-1 #card-2 h1 {
padding-top: 40px;
color: #f4b41a;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
#new-product {
max-width: 100%;
}
.footer {
background-color: #222222;
color: white;
width: 100%;
}
.fa {
color: white !important;
margin-right: 20px;
margin-left: 20px;
}
.fa:hover {
text-decoration: none;
}
@media (max-width: 767px) {
}
任何帮助将不胜感激。
编辑：终于修复了网站。
添加到我的 style.css：
* {
overflow-x: hidden;
}
3 个解决方案
解决方案1
1 2020-09-11 00:04:25
尝试设置margin: 0;important; 在.row
当我遇到同样的问题时，我设法以这种方式解决了它。
希望能有所帮助
*PS 如果你不把你的内容放在 .col inside of .row 中，就会发生这种情况
解决方案2
0 2020-08-29 07:12:55
尝试将此添加到您的 CSS 中：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
让我知道这个是否奏效！
解决方案3
0 2020-08-29 08:46:04
删除margin-left: -15px和margin-right: -15px for your.row class 您可以在#cards-1 部分 >.row 中找到
为什么在移动设备中网站右侧有一个空白区域
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.