下拉菜单不显示 Bootstrap
Posted
技术标签:
【中文标题】下拉菜单不显示 Bootstrap【英文标题】：Dropdown menu doesn't show Bootstrap 【发布时间】：2020-10-01 05:32:54 【问题描述】：我一直在尝试在我的页面上显示一个下拉菜单，但它不起作用......
我的 html 代码：
<div class="dropdown d-inline">
<div class="widget-header mr-3">
<button href="#" class="icon icon-sm rounded-circle border" data-toggle="dropdown"><i class="fa fa-shopping-cart"></i></button>
<span class="badge badge-pill badge-danger notify"> Cart::count() </span>
</div>
<div class="dropdown-menu p-3 dropdown-menu-right" style="min-width:280px;">
<figure class="itemside mb-3">
<div class="aside">
<img src="bootstrap-ecommerce-html/images/items/1.jpg" class="img-sm border">
</div>
<figcaption class="info align-self-center">
<p class="title">Name of item nice iteme</p>
<a href="#" class="float-right"><i class="fa fa-trash"></i></a>
<div class="price">$250</div> <!-- price-wrap.// -->
</figcaption>
</figure>
<figure class="itemside mb-3">
<div class="aside">
<img src="bootstrap-ecommerce-html/images/items/2.jpg" class="img-sm border">
</div>
<figcaption class="info align-self-center">
<p class="title">Some other item name is here</p>
<a href="#" class="float-right"><i class="fa fa-trash"></i></a>
<div class="price">$250</div> <!-- price-wrap.// -->
</figcaption>
</figure>
<figure class="itemside mb-3">
<div class="aside">
<img src="bootstrap-ecommerce-html/images/items/3.jpg" class="img-sm border">
</div>
<figcaption class="info align-self-center">
<p class="title">Another name of item item</p>
<a href="#" class="float-right"><i class="fa fa-trash"></i></a>
<div class="price">$250</div> <!-- price-wrap.// -->
</figcaption>
</figure>
<div class="price-wrap text-center py-3 border-top">
Subtotal: <strong class="h5 price">$1200</strong>
</div>
<a href="" class="btn btn-primary btn-block"> Checkout </a>
</div> <!-- drowpdown-menu.// -->
</div>
我的 Bootsrap 集成：
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
这是一个运行在 Laravel 上的 .blade.php 页面。 提前感谢您的帮助，我真的卡住了。
【问题讨论】：
【参考方案1】：因此，在.dropdown .d-inline 之后将<button> 包装在div 中似乎会导致您的问题。 Here 也是一个有效的 CodePen（请注意，我在每个 Bootstrap 中为某些元素添加了一些属性）。
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="dropdown d-inline">
<button type="button" class="icon icon-sm rounded-circle border dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
hello
</button>
<span class="badge badge-pill badge-danger notify"> Cart::count() </span>
<div class="dropdown-menu p-3 dropdown-menu-right">
<figure class="itemside mb-3">
<div class="aside">
<img src="bootstrap-ecommerce-html/images/items/1.jpg" class="img-sm border">
</div>
<figcaption class="info align-self-center">
<p class="title">Name of item nice iteme</p>
<a href="#" class="float-right"><i class="fa fa-trash"></i></a>
<div class="price">$250</div> <!-- price-wrap.// -->
</figcaption>
</figure>
<figure class="itemside mb-3">
<div class="aside">
<img src="bootstrap-ecommerce-html/images/items/2.jpg" class="img-sm border">
</div>
<figcaption class="info align-self-center">
<p class="title">Some other item name is here</p>
<a href="#" class="float-right"><i class="fa fa-trash"></i></a>
<div class="price">$250</div> <!-- price-wrap.// -->
</figcaption>
</figure>
<figure class="itemside mb-3">
<div class="aside">
<img src="bootstrap-ecommerce-html/images/items/3.jpg" class="img-sm border">
</div>
<figcaption class="info align-self-center">
<p class="title">Another name of item item</p>
<a href="#" class="float-right"><i class="fa fa-trash"></i></a>
<div class="price">$250</div> <!-- price-wrap.// -->
</figcaption>
</figure>
<div class="price-wrap text-center py-3 border-top">
Subtotal: <strong class="h5 price">$1200</strong>
</div>
<a href="" class="btn btn-primary btn-block"> Checkout </a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>【讨论】：
【参考方案2】：尝试在按钮标签中添加一个 id="test" 并在下拉 div 中添加一个名为 aria-labelledby="test" 的属性。
【讨论】：
是的，Bootstrap 已作为标准与 Laravel 集成以上是关于下拉菜单不显示 Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章
为啥Bootstrap程序下拉菜单在火狐浏览器里加载不出来，其余的按钮、字体都能好好显示，就是下拉菜单