如何防止导航栏标题重叠？
我目前的导航栏有一些问题。现在它看起来像图像一，但我想让它看起来像图像 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>
森林海2回答
-
MYYA
由于您的标题是position: fixed，您需要为页面内容提供一个等于其高度的边距顶部：/* 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;}main{ margin-top: 72px;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><body> <!--Navigation--> <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top"> <div class="container-fluid"> <img class="navbar-brand" src="http://placekitten.com/200/200" 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> <main> <h1>Our Services</h1> </main> -
拉莫斯之舞
添加一些内置引导边距和填充，如 mt-3（mt 表示 margin-top ）使用 p-2（从每一侧填充）2 和 3 定义 2rem 或 3rem 使用它会修复
随时随地看视频慕课网APP
相关分类
JavaScript