无法在移动视图中创建导航栏

Question

<nav class="navbar navbar-expand-md navbar-dark navbar-transparent fixed-top sticky-navigation" id="lambda-navbar">
<div class="header"><img src="images/ssn_logo.png" alt="logo" style="max-width: 15%;position:absolute;left:2.5%;"/><h1></h1></div>
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span data-feather="menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
</ul>
<form class="form-inline">
</form>
</div>
</nav>

我无法在移动视图中执行此操作。如果我尝试使其响应，导航栏在移动视图中不可见。

Answer 1

在移动视图中，导航栏中添加了一个折叠类，用于设置显示：无。它仅在768px以上被覆盖，这就是为什么它隐藏在小屏幕中的原因

@media (min-width: 768px)
.navbar-expand-md .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;



.collapse {
display: none;
}

Answer 2

如果您不希望导航在移动设备上折叠，只需删除navbar-toggler按钮和collapse navbar-collapse类，以便您的导航保持可见。