html - 为什么我的导航切换按钮不起作用?
问题描述
为什么我在手机或小屏幕上的导航切换按钮不起作用?我使用引导程序,找不到我的错误。我的导航栏应该是响应式的。
<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>
解决方案
您使用的是 Bootstrap 4 还是 Bootstrap 5?它data-toggle
代替data-bs-toggle
了 Bootstrap 4。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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/bootstrap@4.6.1/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>
推荐阅读
- spring-boot - 如何修复服务器中 Web 应用程序的多个部署
- angular - 以角度动态加载 twitter-feed
- c - pthread_cond_wait 是否锁定互斥锁和虚假唤醒
- javascript - Gatsby.js:如何将所有 *.js 文件迁移到 *ts?
- docker - 如何使用 ASP.Net Core 从 docker 容器连接到 DB2?
- regression - 将平面拟合到 3D 中的许多点
- reactjs - FlatList 没有在组件中呈现
- angular - Angular 异步管道与路由器相结合在开发构建和生产构建中表现出不同的行为
- java - 无法获得连接,DataSource 无效:“java.sql.SQLException:找不到适合 dataSource 的驱动程序”
- java - 为什么 Hibernate 4 可能比 JdbcTemplate 更快?