0
私はBootstrap v4-alpha6を使用していますが、私はドロップダウンメニューを表示させないようにしています。ブートストラップ4ドロップダウンメニューが表示されない
私はブートストラップのドキュメントからドロップダウンサンプルコードをテストしましたが、それは動作しました。私は "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>