当我在大屏幕设备上时,如何使导航栏上的这个汉堡按钮消失?



我有了这个导航栏。我打算让这个汉堡只出现在屏幕尺寸低于768px的时候。相反,无论屏幕尺寸有多大,它都会显示出来。顺便说一句,我正在使用bootstrap 4.

我想要的是一个响应式导航栏。所以Home, About等链接是在屏幕大于768px的时候出现的,而不是在点击汉堡按钮的时候。

这是我的代码。

<body>
<nav class="navbar nav-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="#" class="navbar-brand"
><img src="img/logo.png" alt="logo.png"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
</ul>
</div>
</div>
</nav>
</body>

顺便说一下,谢谢大家!

让按钮消失你可以使用@media语法

@media(min-width:768px)
{
.navbar-toggler{
visibility: hidden;
}
}

相关内容

  • 没有找到相关文章