引导javascript不使用本地宿主的Bootstrap 4
引导javascript不使用本地宿主的Bootstrap 4
提问于 2021-02-24 17:15:43
我正在通过一堂课程学习Bootstrap，其中一个练习让我为移动屏幕做了一个切换的下拉菜单。我把代码复制得和指导员完全一样，但是在我的浏览器中，下拉菜单是不会掉下来的--它只是一个按钮，点击后什么也不做。我认为这可能与引导javascript包没有正确加载有关，但我不确定。任何帮助都将不胜感激。我已经在这里包含了我的HTML。我非常确定到js文件都正确的目录的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class='navbar navbar-dark navbar-expand-sm bg-primary fixed-top'>
<div class='container'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#Navbar'>
<span class="navbar-toggler-icon"></span>
</button>
<a class='navbar-brand mr-auto' href='#'> Ristorante confusion</a>
<div class='collapse navbar-collapse' id='#Navbar'>
<ul class='navbar-nav mr-auto'>
<li class='nav-item'> <a class='nav-link' href='./aboutus.html'>Home</a> </li>
<li class='nav-item'> <a class='nav-link' href='#'>Menu</a> </li>
<li class='nav-item'> <a class='nav-link' href='#'>About</a></li>
<li class='nav-item'> <a class='nav-link' href='#'>Contact</a> </li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class ="row row-header align-items-center">
<div class = "col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class = "col-12 col-sm-6">
</div>
</div>
</div>
</header>
<div class = "container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class ="footer">
<div class = "container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class ="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
<a href="http://google.com/+">Google+</a>
<a href="http://www.facebook.com/profile.php?id=">Facebook</a>
<a href="http://www.linkedin.com/in/">LinkedIn</a>
<a href="http://twitter.com/">Twitter</a>
<a href="http://youtube.com/">YouTube</a>
<a href="mailto:">Mail</a>
</div>
</div>
</div>
<div class = "row justify-content-center">
<div class ="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-24 18:08:15
- 尝试将popper.js文件移动到bootstrap.js文件
- 下面，确保您不会丢失初始化下拉列表
- 的my-custom-file.js，确保下拉结构包含引导所需的所有CSS类(例如:在您的代码容器中，请将容器向上移动一个级别，使导航条折叠成为导航条的直接子级。
)
祝你好运，坚持下去！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66355678
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号