【发布时间】:2020-10-08 16:18:27
【问题描述】:
当我删除导航栏切换按钮和 div 导航栏折叠时我遇到了一个问题,我的整个导航栏元素都在我希望它们的正确方式上,但是 div 导航栏折叠是它们使导航栏响应看起来导航栏很好,我的整个导航列表都在我的品牌标志旁边。 请帮助我如何解决?我正在使用引导程序。
HTML/引导程序:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-toggle="affix" >
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar navbar-nav ">
<li class="nav-item p-3"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item p-3"><a class="nav-link" href="#">Members</a></li>
<li class="nav-item p-3"><a class="nav-link" href="#">Membership</a></li>
<li class="nav-item p-3"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item p-3"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
CSS:
*{
padding: 0;
margin: 0;
}
nav {
letter-spacing: 4px;
font-family: 'Metal Mania', cursive;
}
.navbar {
-webkit-transition:padding 0.2s ease;
-moz-transition:padding 0.2s ease;
-o-transition:padding 0.2s ease;
transition:padding 0.2s ease; }
.affix {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
【问题讨论】:
-
发布您的 CSS,我们会处理它:D
-
这只是我正在使用的 css,其他一切都是引导
标签: javascript html css navbar