我有以下 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: green;">
<a class="navbar-brand" href="#">My To Do's</a>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<a class="nav-item nav-link" routerLink="">Checklist</a>
<a class="nav-item nav-link" routerLink="all-tasks">All To Dos</a>
<a class="nav-item nav-link" routerLink="about">About</a>
</div>
</div>
</nav>
</div>
</body>
</html>當我查看它時，導航品牌被左翼咀嚼。
我做錯了什么，還是我必須自己做填充？
uj5u.com熱心網友回復：
我相信這是因為navbar添加填充的類默認0為“x填充”：
/* bootstrap.css */
.navbar {
--bs-navbar-padding-x: 0;
}
為了解決這個問題，給變數一個值：
.navbar {
/* What the docs use */
--bs-navbar-padding-x: 0.5rem;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512234.html
標籤：htmlcss推特引导