【问题标题】:Bootstrap navbar toggler icon is not working on mobileBootstrap 导航栏切换器图标在移动设备上不起作用
【发布时间】:2021-03-26 03:43:25
【问题描述】:

希望你们一切都好,我刚刚遇到了一个问题。我让我的网站在线。一切运行良好期待导航栏切换器图标。它不适用于移动设备。它在桌面上运行良好 这是我的代码

<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 脚本未正确包含。它使用本地主机。不,javascript没有切换。也许它适合你?
  • 这能回答你的问题吗? Bootstrap Dropdown menu is not working
  • kiko 软件非常感谢你是对的我还在使用 localhost

标签: php html twitter-bootstrap responsive


【解决方案1】:

您似乎没有在头脑中添加 Javascript。将以下行添加到您的 HTML &lt;head&gt; 标记(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>

【讨论】:

    猜你喜欢
    • 2015-10-27
    • 1970-01-01
    • 1970-01-01
    • 2021-03-15
    • 2018-09-07
    • 1970-01-01
    • 2019-02-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多