【发布时间】：2021-01-30 14:22:51
【问题描述】：
我正在做一个简单的项目，并尝试创建一个带有汉堡菜单的响应式导航栏，在最大宽度为 480 像素的设备上，菜单位于左侧。这是我到目前为止所拥有的，不确定我做错了什么。我尝试在导航栏和下拉菜单中定位不同的类，但没有任何效果。抱歉，如果我发布了错误或错误的格式。我还是 Stack 的新手，任何帮助都将受到赞赏。谢谢！
HTML：
<nav>
<!--Navbar Start-->
<div class="container-fluid">
<div class="row">
<div class="col-12 border-bottom border-dark">
<div class="page-header text-center">
<h1>Genealogist</h1>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another
action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--Navbar End-->
CSS：
html, body {
overflow-x: hidden;
}
.dropdown {
}
img:hover {
transform: translateX(60px);
}
.form {
padding-top: 50px;
}
main {
background-color: lightblue;
border-bottom: solid black 2px;
background-size: cover;
}
.experience ul {
list-style-type: none;
}
/* Width Covers 0px-480px */
@media screen and (max-width: 480px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
/* Width Covers 481px-768px */
@media screen and (min-width: 768px) {
body {
}
}
/* Width Covers 769px-1025px (and greater) */
@media screen and (min-width: 1025px) {
body {
}
}
【问题讨论】：
标签： html css bootstrap-4 media-queries