我正在尝试在 Angular 8 中应用响应式 Bootstrap 4 导航栏。
只要关闭菜单,元素的顺序就符合预期: 公司、浏览、登录
问题: 一旦我打开菜单,#menu 就会按预期获得 navbar-collapse flex 属性:
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
但是,由于 flex-basis: 100%
,这会将 #company 推到右边,#login 最终位于整个菜单下方。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" id="company">COMPANY</a>
<div class="collapse navbar-collapse" id="menu">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">BROWSE</a>
</div>
</div>
<div class="navbar-nav" id="login">
<a class="nav-item nav-link" href="#">LOGIN</a>
</div>
</nav>
我很难确保#menu 不会影响#company 和#login。我能想到的唯一方法是通过 Bootstrap order-*
类设置元素的顺序。
这需要我知道#menu 何时打开,如果没有一些程序化的 jQuery 观察(我想避免),这似乎是不可能的。
如何根据#menu 的切换状态设置顺序? 或者:如何确保元素保持原样?
最佳答案
以我为例
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="about-us.html">
<img class="img-responsive" src="../img/logo.png" alt=""/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="la la-bars"></i></span>
</button>
<div class="navbar-collapse collapse" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-item nav-link" href="#">BROWSE</a>
</li>
</ul>
</div>
<a class="nav-item nav-link" href="#">LOGIN</a>
</nav>
关于html - 是否有一种 HTML/Bootstrap 方法可以根据响应菜单的切换状态在导航栏中设置元素顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59130767/