This question is an exact duplicate of:
The following Bootstrap 4-alpha dropdown example taken from their official website here is not working as expected on latest versions of IE, Chrome, and Firefox. If you copy the below content and save it as an html file, you'll get the result shown in the image below that is different what Bootstrap is showing in the above link. I've tested the below html file on both machines win 7 and win 8.1 on all three browsers showing the same results as shown in image below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</body>
</html>
UPDATE
The user @vanburen helped me RESOLVED the issue. In the <head>...</head> section I was using tag instead of <rel....> tag for linking css file. And I was using one extra tag for Bootstrap 3 that I should have removed.
Aucun commentaire:
Enregistrer un commentaire