Javascript 如何在导航栏中进行更改，使其同时响应移动视图

我已经在一个ejs文件中创建了一个导航栏，然后通过在所有文件中包含来使用该文件。 问题是它在桌面视图中是正常的，但它对移动视图没有响应，因为它没有使用整个屏幕，并且移动屏幕中还留有一些空间。 这是我的导航栏文件，我把它包括在我所有的文件中

 <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
 <!--   <a class="navbar-brand" href="#"></a> -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
  target="#navbarColor01" 
  aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle 
  navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a class="nav-link" href="/users/home">Home <span class="sr-only"> 
   (current)</span></a>
      </li>
      <li class="nav-item ">
              <a class="nav-link" href="/users/pldReports">M &amp; E</a>
          </li>
      <li class="nav-item">
          <a class="nav-link" href="/expense/">Expense</a>
      </li>
        <a class="nav-link" href="/procurement/">Asset Requisition</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/procurement/getvendorListView">Impaneled Vendor</a>
    </li>
      
      <li class="nav-item dropdown">   
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-3" data-toggle="dropdown" 
   aria-haspopup="true"
          aria-expanded="false">Timesheets</a>
          <div class="dropdown-menu dropdown-menu-right dropdown-info" aria- 
 labelledby="navbarDropdownMenuLink-3">
                  <a class="dropdown-item" href="/timesheets/taskListView">Tasks</a>
                  <a class="dropdown-item" href="/timesheets/timesheetListView">Timesheets</a>
                  <a class="dropdown-item" href="/users/timesheet">Calendar</a>
          </div>
      </li>
  
      <% if(objUser.isManager) { %> 
      <li class="nav-item dropdown" >
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" 
         aria-haspopup="true"
          aria-expanded="false"> Manage Approvals</a>
          <div class="dropdown-menu dropdown-menu-right dropdown-info" aria- 
        labelledby="navbarDropdownMenuLink-4">
          <a class="dropdown-item" href="/approvals/pldFormApprovals">PLD Form Approval</a>
          <a class="dropdown-item" href="/approvals/expenseApprovals">Expense Approval</a>
          <a class="dropdown-item" href="#">Procurement Approval</a>
          </div>
      </li>
      <% } %>
      
      </ul>
      <form class="form my-2 my-lg-0">
      
          <ul class="my-2 my-sm-0 navbar-nav">
              <li class="nav-item dropdown" style="float:right">
                  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">
                  <i class="fas fa-user "></i>&nbsp; <%= objUser.name%> </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-info" aria- 
     labelledby="navbarDropdownMenuLink-4">
                  <a class="dropdown-item" href="/users/editProfile">Edit Profile</a>
                  <a class="dropdown-item" href="/users/logout">Log out</a>
                  </div>
              </li>
          </ul>
      
      </form>
  
  </div>
  </nav>

它在移动视图中显示为：

---

我将此文件用作

我认为您应该查看媒体查询，因为它将帮助您根据屏幕大小设置页面元素的样式

看看下面的例子

我添加了一些查询或每个屏幕大小，并且根据访问者使用的内容更改元素的背景颜色

/*默认情况下背景为蓝色*/
.cool{背景色：蓝色；}
/*如果访客使用平板电脑（640px）进行访问，请将背景颜色设置为橙色*/
@介质（最小宽度：640像素）{
.cool{背景色：橙色；}
}
/*如果访客在笔记本电脑上，请将背景设置为黄色*/
@介质（最小宽度：1024px）{
.cool{背景色：黄色；}
}
/*台式机*/
@介质（最小宽度：1280px）{
.cool{背景色：红色；}
}

我使用的是

minwidth

而不是

max width

，因为一旦屏幕大小达到最小宽度X，在该查询中编写的新CSS规则就会生效

你真酷！

链接：

---

我为您提供了一个演示，如果您调整屏幕大小，您将看到代码生效。如果你能告诉我你的目标是什么，而不是“让它有反应”，我可以帮你多一点：D