Question

我正在使用Bootstrap v4-alpha6，而且我没有让我的下拉菜单显示出来。

我测试了一个来自bootstrap文档的下拉示例代码并且它有效，我甚至没有创建＆＃34; show＆＃34;类。有谁知道它可能是什么？如果有人能提供帮助，我将不胜感激。

我添加了下面的代码，这里是JSFiddle

＆＃13;

.carrinho-compras {
  margin-left: 200px;
  color: #E90020;
  font-weight: 700;
  cursor: pointer;
}

.carrinho-compras .carrinho-compras-icone {
  position: relative;
  margin-right: 7px;
  width: 50px;
  height: 50px;
  border: 2px solid #E90020;
  border-radius: 50px;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
}

.carrinho-compras-contador {
  position: absolute;
  bottom: -10px;
  left: 27px;
  width: 25px;
  height: 25px;
  background: #f9b414;
  border-radius: 25px;
  color: #fff;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}

.dropdown-carrinho-compras { 
  position: absolute;
  top: 130%;
  left: -150px;
  width: 300px;
  margin: 0;
  padding: 20px 40px 20px 85px;
  border-width: 5px 0 0;
  border-style: solid;
  border-color: #f9b414;
  border-radius: 0;
  color: #000;
}

.dropdown-carrinho-compras p {
  margin-bottom: 5px;
  font-size: 18px;
  }

.dropdown-carrinho-compras p + p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
}

.carrinho-compras-icone-dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  font-size: 50px;
  color: #f9b414;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="carrinho-compras">
  <div class="dropdown">
  <a href="#" data-toggle="dropdown"></a>
  <span class="fa fa-shopping-cart carrinho-compras-icone" aria-hidden="true"></span><span class="carrinho-compras-contador">0</span>Carrinho
  <div class="dropdown-menu dropdown-carrinho-compras">
    <span class="fa fa-shopping-cart carrinho-compras-icone-dropdown"></span>
    <p>Ops!</p>
    <p>Seu carrinho está vazio!</p>
  </div>
 </div>
</div>

＆＃13;

Answer 1

锚点应该用图标和文字围绕跨度......

https://www.codeply.com/go/evUqtZcmD6

<div class="dropdown">
    <a href="#" data-toggle="dropdown">
        <span class="fa fa-shopping-cart carrinho-compras-icone" aria-hidden="true"></span><span class="carrinho-compras-contador">0</span>Carrinho</a>
    <div class="dropdown-menu dropdown-carrinho-compras">
        <span class="fa fa-shopping-cart carrinho-compras-icone-dropdown"></span>
        <p>Ops!</p>
        <p>Seu carrinho está vazio!</p>
    </div>
</div>

Answer 2

您应该添加类下拉列表并在{

>中包装span

更新小提琴：https://jsfiddle.net/tL5eoex8/11/

Answer 3

上面标记为代码的代码对我不起作用。我假设popper.js已正确加载，否则我会看到bootstrap引发的异常。

Bootstrap 4下拉菜单未显示

3 个答案: