HTML导航栏菜单图标在较小的屏幕上向下显示一行

Question

我的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="vc-transp.png" height="50px" style="margin-left: -30px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 10px;">
<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="index.html"><b>Dashboard</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="donate.html">Donate</a>
</li>
<li class="nav-item"><a class="nav-link" href="protect.html">Protect</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>

CSS：

.nav a{
color: white !important;
font-size: 20px;
}
.navbar-brand{
color: white !important;
font-size: 20px;
font-family: sans-serif;
}

在某些屏幕上，菜单图标位于正确的位置：屏幕右侧，与图像对齐。

然而，在大多数较小的屏幕上，菜单图标向下移动一行，导航栏变得更高。我该怎么解决这个问题？

Answer 1

有两种解决方案。。1.使用引导程序导航栏类。。这将自动使您的页面做出响应。或2.使用css媒体查询。。你必须手动定义手机屏幕和电脑屏幕