我在使用bootstrap时遇到了一些问题。
我有一个简单的HTML网页，有一个导航栏和一些下拉菜单按钮。我注意到我在其他页面中使用的同样的代码，如果在正文中存在一个表格，就无法使用。我相信是我的表格结构出了问题，但是我没有弄清楚，因为我使用的是标准的表格，而且我是用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>
我希望这段代码足够清晰易懂 谢谢大家
在bootstrap 4下拉菜单需要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">