html - The bootstrap dropdown doesn't pop up -
i created dropdown menu in bootstrap in html. button appears , caret. menu doesnt pop up. here code:
.dropdown { color: #666666; font-size: 11px; } .dropdown .btn-default { background: #f2f2f2; color: black; border: none; border-radius: 0px; width: 150px; height: 20px; padding-top: 3px; margin-top: -2px; margin-bottom: 3px; font-size: 11px; } .dropdown .btn-default, .dropdown .btn-default:focus { background-color: coral; color: black; } .dropdown .btn-default:active, .dropdown .btn-default .dropdown-toggle:active, .dropdown .btn-default:hover { background-color: coral; color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> lingua <button class=" btn btn-default " type="button" data-toggle="dropdown"> <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">italiano <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">italia</li> <li> <img class="dropdwn_img" src="http://www.geysir-andernach.de/navigation2012/flag_2.png">england</li> </ul> </div>
is i've done wrong or should change there? thanks! answer below helped have 2 dropdown buttons , menu of each of them appears under first dropdown button. how can fix that? here 2 dropdowns:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> lingua <button class=" btn btn-default " type="button" data-toggle="dropdown"> <img class="dropdwn_img" src="images/flag.png">italiano <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <img class="dropdwn_img" src="images/flag.png">italia</li> <li> <img class="dropdwn_img" src="images/flag.png">england</li> </ul> paese <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown"> <img class="dropdwn_img" src="images/flag.png">italia <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <img class="dropdwn_img" src="images/flag.png">italia</li> <li> <img class="dropdwn_img" src="images/flag.png">england</li> </ul> </div>
you missed close dropdown , create new dropdown.
add below code before text paese
</div> <div class="dropdown">
note: seem missing bootstrap
, jquery
references. add below references head section of html.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
working code:
.dropdown { color: #666666; font-size: 11px; display: inline; } .dropdown .btn-default { background: #f2f2f2; color: black; border: none; border-radius: 0px; width: 150px; height: 20px; padding-top: 3px; margin-top: -2px; margin-bottom: 3px; font-size: 11px; } .dropdown.btn-default, .dropdown.btn-default:focus { background-color: coral; color: black; } .dropdown.btn-default:active, .dropdown.btn-default.dropdown-toggle:active, .dropdown.btn-default:hover { background-color: coral; color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> lingua <button class=" btn btn-default " type="button" data-toggle="dropdown"> <img class="dropdwn_img" src="images/flag.png">italiano <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <img class="dropdwn_img" src="images/flag.png">italia</li> <li> <img class="dropdwn_img" src="images/flag.png">england</li> </ul> </div> <div class="dropdown"> paese <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown"> <img class="dropdwn_img" src="images/flag.png">italia <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <img class="dropdwn_img" src="images/flag.png">italia</li> <li> <img class="dropdwn_img" src="images/flag.png">england</li> </ul> </div>
Comments
Post a Comment