如果 table 存在 Bootstrap，导航栏下拉菜单将不起作用

Question

我在使用 bootstrap 时遇到一些问题。

我有一个简单的 HTML 网页，带有一个带有一些下拉菜单按钮的导航栏。我注意到，如果正文中存在 table，我在其他页面中使用的相同代码将不起作用。不过，我认为我构建 table 的方式有问题，但由于我使用了标准的，所以我没能搞清楚，我使用 javascript 填充数据。

这是我的 HTML 代码的一部分：

<!doctype html>
<html lang="en">
    <head>
    <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="../css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <title>My Web Page Title</title>

      <style>
        .navbar-nav > li {
          padding-left:10px;
          padding-right:10px;
        }

        #mytable tr:hover {
          background-color:#F2F0F0;
        }
      </style>
    </head>

    <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container p-2">
        <a class="navbar-brand" href="#">My Brand</a>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <div class="btn-group">
            <button id="btnOne" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ButtonOne</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">DropdownOne</a>
              <a class="dropdown-item" href="#">DropdownTwo</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <div class="btn-group">
            <button id="famBtn" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ButtonTwo</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">DropdownOne</a>
              <a class="dropdown-item" href="#">DropdownTwo</a>

..所有结束标签，及以下，始终在正文标签中：

<div class="container pt-5">
  <div class="row">
    <div class="col-sm-8">
      <h3>Table Title</h3>
    </div>
    <div class="col-sm-4">
      <a type="button" href="#" class="btn btn-success">Right Table Button</a>
    </div>
  </div>
  <hr>
  <br>
  <input type="text" id="myInput" onkeyup="filterData()" placeholder="Search by name.." title="Type in a name">
  <div class="table">
    <table id="mytable" class="table table-hover">
      <!-- Here goes our data, I fill it dinamically with javascript -->
    </table>
  </div>
  <br>
</div>

<!-- some omitted Firebase scripts -->

<script src="../main.js"></script>

我希望代码足够可读。谢谢大家！

Answer 1

在bootstrap4个下拉菜单中需要bootstrap.min.js。确保您已链接 bootstrap.min.js

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">

如果 table 存在 Bootstrap，导航栏下拉菜单将不起作用

Navbar dropdown menu won't work if table present Bootstrap

html

drop-down-menu

bootstrap-4

navbar

bootstrap-table