問題描述
html頁面Bootstrap頂部的白條 (White bar at top of html page Bootstrap)
頁面頂部會出現一個白條，表示要包含圖像的部分。通過刪除網頁的不同部分，我發現刪除打開和關閉標籤可以修復它，但我仍然需要包含它們。此外，刪除引導程序也可以解決問題，但我稍後需要引導程序。我真的不知道是什麼導致了這個問題。
* {
margin: 0;
padding: 0;
list‑style: none;
text‑decoration: none;
}
body {
font‑family: 'Raleway', sans‑serif;
}
.sidebar {
top: 0;
position: fixed;
left: ‑250px;
width: 250px;
height: 100%;
background: rgb(4, 11, 20);
transition: all .5s ease;
}
.sidebar header {
font‑size: 22px;
color: white;
text‑align: center;
line‑height: 70px;
background: rgb(4, 11, 20);
user‑select: none;
}
.sidebar ul a {
display: block;
height: 100%;
width: 100%;
line‑height: 65px;
font‑size: 20px;
color: white;
padding‑left: 40px;
transition: 0.3s;
opacity: 0.8;
}
ul li:hover a {
padding‑left: 45px;
opacity: 1;
}
.sidebar ul a i {
margin‑right: 8px;
}
#check {
display: none;
}
label #menu‑open,
label #menu‑close {
position: absolute;
cursor: pointer;
}
label #menu‑open {
left: 40px;
top: 15px;
font‑size: 35px;
color: black;
padding: 6px 12px;
transition: all .5s;
}
label #menu‑close {
z‑index: 1111;
left: 195px;
top: 15px;
font‑size: 30px;
color: white;
padding: 4px 9px;
opacity: 0;
transition: all .5s;
transition‑delay: .5s;
}
#check:checked~.sidebar {
left: 0;
}
#check:checked~label #menu‑open {
left: 250px;
opacity: 0;
pointer‑events: none;
}
#check:checked~label #menu‑close {
opacity: 1;
}
section {
background: url("https://images.pexels.com/photos/1779487/pexels‑photo‑1779487.jpeg?cs=srgb&dl=pexels‑designecologist‑1779487.jpg") no‑repeat;
background‑position: center;
background‑size: cover;
height: 100vh;
transition: all .5s;
}<!doctype html>
<html lang="en" dir="ltr">
<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.3.1/css/bootstrap.min.css" integrity="sha384‑ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap‑icons@1.5.0/font/bootstrap‑icons.css">
<link href="css/style.css" rel="stylesheet">
<title>Tyler Wong Portfolio</title>
</head>
<body>
<input type="checkbox" id="check">
<label for="check">
<i class="bi bi‑list" id="menu‑open"></i>
<i class="bi bi‑x" id="menu‑close"></i>
</label>
<div class="sidebar">
<header>Tyler Wong</header>
<ul>
<li>
<a href="#"> <i class="bi bi‑house‑door"></i> Home </a>
</li>
<li>
<a href="#"> <i class="bi bi‑person"></i> About </a>
</li>
<li>
<a href="#"> <i class="bi bi‑code‑square"></i> Projects </a>
</li>
<li>
<a href="#"> <i class="bi bi‑mailbox"></i> Contact </a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery‑3.3.1.slim.min.js" integrity="sha384‑q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384‑UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384‑JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<section></section>
</body>
</html>
方法 2:
I had runned same code on my local the issue seems to be here
label {
display: inline‑block;
}
It fixed the error comment this display property and see it will reflect
方法 3:
If you move <section> to the top of the html it should go away do to the flow of html. Your other option is to give it a negative position
background: {
position: relative;
top:‑25px;
}
(by Tyler Wong、Blaztix、Gopal Oswal、Justin)