Bootstrap 4 如何在Bootstrap4中使购物车下拉？
我从网站上下载了以下购物车 我想实现购物车弹出窗口。但是，不需要显示鼠标在上面的时间，如果我可以通过单击来完成，那就没关系了 但是，我没能做到这一点。请帮帮我 MWEBootstrap 4 如何在Bootstrap4中使购物车下拉？,bootstrap-4,cart,Bootstrap 4,Cart,我从网站上下载了以下购物车 我想实现购物车弹出窗口。但是，不需要显示鼠标在上面的时间，如果我可以通过单击来完成，那就没关系了 但是，我没能做到这一点。请帮帮我 MWE 马蒂尔多坎 /*删除导航栏的默认圆角边框并增加底部边距*/ navbar先生{ 边缘底部：50px； 边界半径：0； } /*删除jumbotron的默认底部边距*/ 琼伯伦先生{ 页边距底部：0； } /*为页脚添加灰色背景色和一些填充*/ 页脚{ 背景色：#F2F2； 填充：25px； } .模态背景 { 背景：无； }
马蒂尔多坎
/*删除导航栏的默认圆角边框并增加底部边距*/
navbar先生{
边缘底部：50px；
边界半径：0；
}
/*删除jumbotron的默认底部边距*/
琼伯伦先生{
页边距底部：0；
}
/*为页脚添加灰色背景色和一些填充*/
页脚{
背景色：#F2F2；
填充：25px；
}
.模态背景
{
背景：无；
}
-
-
-
银联湾公园2 x 24.89美元
联合湾公园
联合湾公园
<html lang="en">
<head>
<title>Matir Dokan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.modal-backdrop
{
background: none;
}
</style>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Matir Dokan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle1" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Object Type
</a>
<div class="dropdown-menu menu1" aria-labelledby="navbarDropdown1">
<a class="dropdown-item">Toy</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Furniture</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Gift</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Household</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Instrument</a>
</div>
</li>
<script>
$(function(){
$(".menu1 a").click(function(){
$(".toggle1").text($(this).text());
});
});
</script>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
<script>
$(function(){
$(".menu2 a").click(function(){
$(".toggle2").text($(this).text());
});
});
</script>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle3" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cart
</a>
<div class="dropdown-menu menu3" aria-labelledby="navbarDropdown3">
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park <span class="dropdown-product-details">2 x $24.89</span>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">
<div>
<img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
</div>
</a>
</div>
</li>
</ul>
</div>
</nav>