我有了这个导航栏。我打算让这个汉堡只出现在屏幕尺寸低于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;
}
}