php - Bootstrap 导航栏切换器图标在移动设备上不起作用
问题描述
希望你们一切都好,我刚刚遇到一个问题。我让我的网站在线。一切运行良好期待导航栏切换器图标。它不适用于移动设备。它在桌面上运行良好这是我的代码
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
你也可以查看我的网站 http://rudrafasteners.com/
解决方案
看来您没有在头上添加 Javascript。将以下行添加到您的 HTML<head>
标记(Jquery 和 Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
推荐阅读
- java - 我有一个无法启动活动的 java lang
- pine-script - 如何从加载在不同面板中的脚本在主图表上绘制形状?
- javascript - 调用 node-fs-extra 函数 copySync() 期间出现无效回调错误
- html - 角度重新定义路线返回
- javascript - 如何在 React JS 上添加输入数字的增量
- typescript - 将多个文件中的夹具和测试导入 main.js 文件时,TestCafe“未定义夹具”错误
- c# - C# 使用字符串命名类的实例
- wpf - LiveCharts 数据点标签重叠
- botframework - 在哪里可以找到网络聊天的类型值
- android - 如何为自定义 TextInputLayout 设置默认样式