我的导航栏在桌面上看起来像这样:
在移动设备上工作正常。
我想在桌面上逐个显示项目,并使菜单图标消失。
我的代码:
<nav class="navbar navbar-expand-lg navbar-inverse">
<div class="navbar-header">
<img src="vc-transp.png" href="#" height="50px">
<button class="navbar-toggler" style="background-color: transparent; border-color: transparent; filter: invert(100%); padding-top: 8px;"type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-2x"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"><b>Dashboard</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
.nav a{
color: white !important;
font-size: 20px;
}
.navbar-brand{
color: white !important;
font-size: 20px;
font-family: sans-serif;
}
a:link {
font-size: 17px;
color: #D4E1E4;
text-decoration: none;
}
a:visited {
font-size: 17px;
color: #D4E1E4;
text-decoration: none;
}
我该如何解决?
答案 0 :(得分:0)
您可以为此使用默认的navbar
模板。
992px
之后,您的汉堡菜单图标将消失,菜单项将以水平方式显示。
在992px
之前,将显示您的汉堡菜单,并以折叠的方式垂直显示菜单项。
您可以使用px
类来管理navbar-expand-*
,我在这里使用navbar-expand-lg
类,其中lg代表992px
.nav a {
color: white !important;
font-size: 20px;
}
.navbar-brand {
color: white !important;
font-size: 20px;
font-family: sans-serif;
}
a:link {
font-size: 17px;
color: #D4E1E4;
text-decoration: none;
}
a:visited {
font-size: 17px;
color: #D4E1E4;
text-decoration: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="vc-transp.png" height="50px"></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">
<a class="nav-link" href="#"><b>Dashboard</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>