我的导航栏当前存在一些问题。现在它看起来像图像1,但我想使其看起来像图像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
答案 0 :(得分:0)
添加一些内置的引导程序边距和填充,例如mt-3(mt表示margin-top)使用p-2(从两侧填充)2和3定义2rem或3rem使用它将修复
答案 1 :(得分:0)
由于标题为flutter\bin
,因此需要使页面内容的页边距等于其高度:
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;
}