我如何在導航欄中進行更改，以便它也響應移動視圖

Question

我在 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>

它在移動視圖中顯示為：

我將此文件用作 <% include ./partials/navbar %>

Answer 1

我認為您應該看看 Media Queries，因為它會幫助您根據屏幕大小設置頁面元素的樣式。

看看下面的例子。

我添加了一些查詢或每個屏幕尺寸，並且我正在根據訪問者使用的內容更改元素的背景顏色。

/* background is blue on default */
.cool { background-color:blue; } 

 /* if visitor is visiting from a tablet (640px), make background-color orange*/
@media (min-width: 640px) {
  .cool  { background-color:orange; }
}

/* if visitor is on their laptop, make the background yellow */
@media (min-width: 1024px) {
  .cool  { background-color:yellow; } 
}

/* Desktops  */
@media (min-width: 1280px) {
  .cool  { background-color:red; } 
}

我使用的是min-width而不是max-width ，因為一旦屏幕尺寸達到 X 的最小寬度，在該查詢中寫入的新 CSS 規則就會生效。

<div class="cool">
   you are cool!
</div>

鏈接：

JSfiddle 上的演示

在 W3schools 上閱讀@media