最近我一直在學習設計導航欄的樣式，這是我在網路開發培訓中遇到的最奇怪的困難。在這段代碼中，我的導航欄幾乎是樣式化的，但問題是我在頁面右側得到了一個小的空白區域。我很困惑哪個元素可能會導致這種情況。我已經嘗試了所有填充，邊距，邊框，沒有任何幫助。我查看了 Stackoverflow 上的其他答案，其中大多數建議在整個正文中添加“margin：0”。更奇怪的是，我已經把它放在那里了。
我想補充的另一件事是，在為這個專案編碼時，我確實多次遇到白色間隙問題，但我使用了很多“臟編碼”（例如：向導航欄中的元素添加邊距或填充以制作看起來導航欄完美地貼在頂部和側面，而實際上并非如此）。有人可以解釋一下如何讓導航欄完美地貼在頂部和側面，同時又沒有任何“臟代碼”。提前致謝。
伙計們，由于我剛剛學習 Web 開發，我的代碼可能看起來一團糟，因為我不知道自己在哪里應用了引導程式以及在哪里覆寫了它。對于那個很抱歉。
HTML 代碼：
<!DOCTYPE html>
<html lang="en">
<!-- META TAGS -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/a2efd1781b.js" crossorigin="anonymous"></script>
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Stencil.io</title>
</head>
<body>
<nav class="navbar navbar-collapse-md bg-dark">
<h1>stencil.io</h1>
<div class="row navbar-toggler">
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.quora.com">Quora</a></li>
<li><a href="https://youtube.com">Youtube</a></li>
</ul>
</div>
</nav>
<header>
<h1 class="title">All your social media at one place.</h1>
<div class="icons container-fluid">
<i class="snapchat fa-brands fa-square-snapchat fa-7x"></i>
<i class=" instagram fa-brands fa-instagram fa-7x"></i>
<i class=" twitter fa-brands fa-twitter fa-7x"></i>
</div>
</header>
</body>
</html>
CSS 代碼：
body{
padding: 0;
margin: 0;
}
nav{
color: antiquewhite;
position: sticky;
right: 0;
}
h1{
padding: 10px 20px;
}
ul{
list-style: none;
}
li{
padding: 10px;
display: inline-block;
}
a{
text-decoration: none;
color: antiquewhite;
}
a:hover{
color: #FFD39A;
}
.title{
font-family: "Rubik", sans-serif;
width: 40%;
margin: 150px 100px;
float: left;
}
i{
padding: 30px;
}
.icons{
position: relative;
top: 100px;
}
添加圖片供參考： 您可以看到頁面右側的白色小間隙
uj5u.com熱心網友回復：
我打賭 bootstrap 的 row 類有時很煩人 margin-left: -15px，并且margin-right: -15px. 所以你有三個解決方案：
1-覆寫引導程式的行類：
.row {
margin: 0;
}
2-將您的.rowdiv 包裝在一個.container-fluiddiv 中（但您可能必須更改您的導航）
3-最好的方法：擺??脫你的.row班級（順便說一句，不確定你是否需要它）
GLOBALLY：您可能需要研究引導程式結構才能更好地了解它的作業原理。行應該總是（好吧，幾乎）被包裹在一個container或container-fluidBootstrap 中。缺少它通常會導致這種由負邊距引起的水平滾動，.row如本文開頭所述。
uj5u.com熱心網友回復：
這可能對你有用
body {
margin: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507489.html
標籤：javascript html css 推特引导