自定义 css 导航栏问题，无法在移动设备上使用

Question

我的代码中缺少什么，导航在移动屏幕上不起作用，我是否遗漏了与菜单栏相关的任何标签？

<nav class="navbar navbar-expand-lg bg-white text-uppercase fixed-top" style="border-bottom: .125rem solid #fc9a00;">
    <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/top_logo.3bfa77.gif" alt="logo" /></a>
        <button class="navbar-toggler text-uppercase font-weight-bold bg-primary rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown mx-0 mx-lg-1">
                    <a href="#" class="nav-link py-3 px-0 px-lg-3 rounded" data-bs-toggle="dropdown">Company</a>
                    <div class="dropdown-menu">
                        <a href="aboutus.html" class="dropdown-item nav-item">Greeting</a>
                    </div>
                </li>
                <li class="nav-item dropdown mx-0 mx-lg-1">
                    <a href="#" class="nav-link py-3 px-0 px-lg-3 rounded" data-bs-toggle="dropdown">Services</a>
                    <div class="dropdown-menu">
                        <a href="test.html" class="dropdown-item nav-item">test</a>
                     
                    </div>
                </li>                       
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Answer 1

看来您没有添加引导程序 css 和 javascript。这对我有用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg bg-white text-uppercase fixed-top" style="border-bottom: .125rem solid #fc9a00;">
    <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/top_logo.3bfa77.gif" alt="logo" /></a>
        <button class="navbar-toggler text-uppercase font-weight-bold bg-primary rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown mx-0 mx-lg-1">
                    <a href="#" class="nav-link py-3 px-0 px-lg-3 rounded" data-bs-toggle="dropdown">Company</a>
                    <div class="dropdown-menu">
                        <a href="aboutus.html" class="dropdown-item nav-item">Greeting</a>
                    </div>
                </li>
                <li class="nav-item dropdown mx-0 mx-lg-1">
                    <a href="#" class="nav-link py-3 px-0 px-lg-3 rounded" data-bs-toggle="dropdown">Services</a>
                    <div class="dropdown-menu">
                        <a href="test.html" class="dropdown-item nav-item">test</a>
                     
                    </div>
                </li>                       
            </ul>
        </div>
    </div>
</nav>

自定义 css 导航栏问题，无法在移动设备上使用

custom css navbarissues, which won't working in mobile

navbar

responsive