如何解决引导程序中的Navbar切换方向
<!-- Navigation Bars -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Hemburger Menu for Mobile Devices -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Company Logo -->
<a class="navbar-brand" href="#"><img src="Images/logo.svg" alt="Compnay Logo"></a>
<!-- Container for Navbar Items -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbars item in unorder list format -->
<ul class="navbar-nav mr-auto mb-2 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Find Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Create your profile</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Recommendations</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Resources</a>
</li>
</ul>
</div>
</div>
</nav>
因此,我正在为此靴子使用bootstrapv5,我想将切换效果的方向从顶部(默认)更改为从左到右(就像侧面导航条一样)?
解决方法
您可以覆盖active
的Bootstrap样式,将过渡更改为从左侧开始,并更改过渡的时间。
示例:
hover
.navbar-collapse
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。