由于某些原因,我无法弄清楚,当我在手机上时,放在左侧的引导导航按钮将不会显示(右侧的按钮分别是“ Home”和“ Link 2”精细)。具体来说,“注册”和“登录”按钮已损坏。
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom:30px">
<a class="navbar-brand" href="#">Website name</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Start <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2 </a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="signup">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login">Log in</a>
</li>
</ul>
</div>
谢谢!
您不应该使用两个折叠div。如果仅取出第二个折叠div,就可以看到它的工作。下面的小提琴示例:
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom:30px">
<a class="navbar-brand" href="#">Website name</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Start <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2 </a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="signup">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login">Log in</a>
</li>
</ul>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句