為什么我的手機或小螢屏上的導航切換按鈕不起作用？我使用引導程式，但找不到我的錯誤。我的導航欄應該是回應式的。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
class="navbar-toggler"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shareOverview.php">Verwaltung</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="addShare.php">Neue Aktie</a>
</li>
<?php
if (isset($_SESSION['name'])) {
?>
<li class="nav-item active">
<a class="nav-link" href="logout.php">Logout</a>
</li>
<?php
}
?>
</ul>
</div>
</nav>
uj5u.com熱心網友回復：
您使用的是 Bootstrap 4 還是 Bootstrap 5？它data-toggle代替data-bs-toggle了 Bootstrap 4。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button
type="button"
data-toggle="collapse"
data-target="#navbarNav"
class="navbar-toggler"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shareOverview.php">Verwaltung</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="addShare.php">Neue Aktie</a>
</li>
</ul>
</div>
</nav>uj5u.com熱心網友回復：
您在按鈕標簽上添加了一些錯誤的屬性。我修復了它，代碼如下。謝謝你。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button
type="button"
data-toggle="collapse"
data-target="#navbarNav"
class="navbar-toggler"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shareOverview.php">Verwaltung</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="addShare.php">Neue Aktie</a>
</li>
<?php
if (isset($_SESSION['name'])) {
?>
<li class="nav-item active">
<a class="nav-link" href="logout.php">Logout</a>
</li>
<?php
}
?>
</ul>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348819.html
標籤：html bootstrap-4