Question

我一直在使用Bootstrap构建响应式网站，而导航栏给我带来了问题。现在，我将其设置为在屏幕尺寸缩小时切换，尽管它确实为下拉菜单创建了一个按钮，但单击该按钮时实际上并没有下拉菜单。我曾尝试寻找其他类似问题的答案，但没有发现对这个问题特别有用的东西。我正在使用Bootstrap 4（https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css）

这是我的导航栏的代码：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
   <a class="navbar-brand" href="index.html">First Last</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
      aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item active">
          <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="./portfolio.html">Portfolio</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="./contact.html">Contact</a>
        </li>

      </ul>

    </div>
  </nav>

如果这是一个愚蠢的问题，我感到抱歉，我是编码新手。

Answer 1

工作正常，并且导航栏菜单在引导程序中工作正常。

您的问题是因为您没有在代码中导入引导javascript

您的代码简单且已解决问题：

public void checkRowsSize(Events events, Context contex)
{  
    new Thread(new Runnable() { 
        public void run() {
        if(events.getRowCount()>8){
            events.deleteFirstRow(contex);
        }
    }
}).start();
}

和另一个示例https://jsfiddle.net/Alirezaaraby/j7Lf6mtn/7/

您应该在HTML代码中<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>的末尾导入以下脚本：

<body>

折叠后，引导程序导航栏菜单不会下拉

1 个答案: