Html 引导中的导航栏切换方向
因此,我将bootstrapv5用于此导航栏,并且我希望将切换效果的方向从上到下(默认)更改为从左到右(就像侧导航栏一样)?您可以覆盖Html 引导中的导航栏切换方向,html,css,nav,bootstrap-5,Html,Css,Nav,Bootstrap 5,因此,我将bootstrapv5用于此导航栏,并且我希望将切换效果的方向从上到下(默认)更改为从左到右(就像侧导航栏一样)?您可以覆盖的引导样式。导航栏折叠,将转换更改为从左,并更改转换的计时 例如: .navbar折叠{ 位置:固定; 顶部:50px; 左:0; 左侧填充:15px; 右侧填充:15px; 垫底:15px; } .navbar-collapse.collapsing{ 左-75%; 过渡:高度和舒适度; } .navbar-collapse.show{ 左:0; 过渡:左30
的引导样式。导航栏折叠
,将转换更改为从左,并更改转换的计时
例如:
.navbar折叠{
位置:固定;
顶部:50px;
左:0;
左侧填充:15px;
右侧填充:15px;
垫底:15px;
}
.navbar-collapse.collapsing{
左-75%;
过渡:高度和舒适度;
}
.navbar-collapse.show{
左:0;
过渡:左300毫秒缓进缓出;
}
.navbar开关。折叠~.navbar折叠{
过渡:左500ms缓进缓出;
}
谢谢你的帮助,伙计:)
<!-- 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>