gpt4 book ai didi

javascript - 如何防止导航栏重叠标题?

转载 作者:行者123 更新时间:2023-11-27 23:15:49 24 4
gpt4 key购买 nike

我的导航栏目前有一些问题。现在它看起来像图一,但我想让它看起来像图 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com