Bootstrap 4下拉菜單未顯示

Question

我正在使用Bootstrap v4-alpha6，但我沒有使下拉菜單顯示出來。

我從引導文檔中測試了一個下拉示例代碼，它起作用了，我什至沒有創建“ show”類。 有誰知道這可能是什么？ 如果有人可以幫助，我將不勝感激。

我在下面添加了代碼，這是JSFiddle

 .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; } 

 <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> 

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已正確加載，否則我會看到引導程序引發異常。