我的导航栏目前有一些问题。现在它看起来像图一，但我想让它看起来像图 2。我该怎么做？我必须在 CSS 上添加什么吗？
/* Nav Bar*/
.navbar-brand{
height: 3.5rem;
}
.navbar-nav li {
padding-right: 0.1rem;
}
.nav-link {
font-size: 1.1rem;
font-weight: 500;
}
.nav-item:hover {
border-bottom: 1px solid #FF7200;
}
.nav
{
}<body>
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container-fluid">
<img class="navbar-brand" src="../img/IMG_0537.PNG" alt="KAJ Construction Logo"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#section-Services" >Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Gallery" >Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-Contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>How it currently looks when services link is clicked How I want it to look like
最佳答案
添加一些内置的引导边距和填充，如 mt-3(mt 表示边距顶部)使用 p-2(从每一侧填充)2 和 3 定义 2rem 或 3rem 使用它会修复
关于javascript - 如何防止导航栏重叠标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58279819/