html drop-down button not working
Question
Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome. Here is my html code-
<!DOCTYPE html> <html lang="en"> <head> <title>IconMaker</title> <meta charset=utf-8"> <meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center"> <h1>My Bootstrap Page</h1> <p>Resize the page to understand Responsiveness</p> </div> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Work 1</a></li> <li><a href="#">Work 2</a></li> <li><a href="#">Work 3</a></li> <li><a href="#">Work 4</a></li> </ul> </div> <div class="row"> <div class="col-sm-2"> <p>If you want to use Paypal</p> <i class="fa fa-cc-paypal" style="font-size:36px"></i> </div> <div class="col-sm-2"> <p>If you want to use Mastercard</p> <i class="fa fa-cc-mastercard" style="font-size:36px"></i> </div> <div class="col-sm-2"> <p>If you want to use Visa</p> <i class="fa fa-cc-visa" style="font-size:36px"></i> </div> <div class="col-sm-2"> <p>If you want to use Google Wallet</p> <i class="fa fa-google-wallet" style="font-size:36px"></i> </div> <div class="col-sm-2"> <p>If you want to use American Express</p> <i class="fa fa-cc-amex" style="font-size:36px"></i> </div> </div> </div> </body> </html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?
2 answers
solution1
0 ACCPTED 2017-08-22 06:51:05
Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript
solution2
-1 2017-08-22 06:50:14
You forgot to add the below css
.show > .dropdown-menu {
display: block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Boostrap drop-down not working
Bootstrap drop-down not working
How to turn a button into a drop-down menu?
Putting inputs and a button in a drop-down menu
Angular' Bootstrap drop-down button size
Onclick button href based on drop-down
showing an existing div with drop-down button?
HTML: target=“_blank” for a drop-down list
Drop-down Menu of Checkboxes in An HTML form
Using Javascript with HTML drop-down select
Related Tags