Bootstrap 5：左侧导航菜单，药丸无法正常工作

Question

I have the following code:我有以下代码：

<?php
  $page_title = 'Welcome to JPR Technology';
  include('./includes/header.html');
?>

  <body>

    <div class="d-flex align-items-start mt-5 ms-5">
      <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
        <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
        <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
      </div>
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
         <img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
         <h4>Home Page</h4>
          <p>Welcome to JPR Technology Projects Ltd.</p>
          <?php
            include('./includes/footer.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
          <?php
            include('./calculator.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
          <?php
            include('./dateform.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
          <?php
            include('./register.php');
          ?>
        </div>
      </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="http://localhost:8082/bootstrap-5.0.0-beta2/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  </body>
</html>

This is how my screen looks like initially: enter image description here这是我的屏幕最初的样子：在此处输入图像描述

But when I navigate from tab to tab, the previous page does not clear properly:但是，当我从一个选项卡导航到另一个选项卡时，上一页无法正确清除：

enter image description here在此处输入图像描述

Answer 1

Fix your bootstrap links修复引导链接

<?php
  $page_title = 'Welcome to JPR Technology';
  include('./includes/header.html');
?>
<head>
  <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
  <body>

    <div class="d-flex align-items-start mt-5 ms-5">
      <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
        <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
        <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
      </div>
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
         <img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
         <h4>Home Page</h4>
          <p>Welcome to JPR Technology Projects Ltd.</p>
          <?php
            include('./includes/footer.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
          <?php
            include('./calculator.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
          <?php
            include('./dateform.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
          <?php
            include('./register.php');
          ?>
        </div>
      </div>
    </div>

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  </body>
</html>

Bootstrap 5：左侧导航菜单，药丸无法正常工作

问题描述

1 个解决方案

解决方案1
0 2021-04-09 03:22:14

Bootstrap 5：左侧导航菜单，药丸无法正常工作

问题描述

1 个解决方案

解决方案1 0 2021-04-09 03:22:14

解决方案1
0 2021-04-09 03:22:14