[英]Navbar dropdown menu won't work if table present Bootstrap
我在使用引导程序时遇到了一些问题。
我有一个简单的 HTML web 页面,带有一个带有一些下拉菜单按钮的导航栏。 我注意到如果正文中存在表格,我在其他页面中使用的相同代码将不起作用。 不过,我相信我的表格结构有问题,但由于我使用的是标准表格,所以我没有设法弄清楚,我使用 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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.