Bootstrap 4.5 - 折叠不起作用,jQuery和所有CDN软件包已安装



我是第一次进入引导程序,为此,我将他们的一个演示页面中的一些代码复制到我自己的网站上作为测试,导航栏的代码来自官方引导示例:

https://getbootstrap.com/docs/4.0/examples/carousel/

在此演示中,当浏览器处于最小宽度时,您可以切换"汉堡包"菜单以隐藏和显示导航链接和搜索栏。

这对我不起作用,单击菜单按钮没有任何作用。我可以说CSS肯定已安装,因为css样式正在工作,当我检查我的代码时,脚本也都出现了,所以它似乎不是缺少jQuery(我最初的想法(。

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCollapse" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>

我还从我的 Wordpress.function.php文件中查询所有脚本,如下所示:

function wpbootstrap_enqueue_styles() {
wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' );
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot2','https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', array( 'jquery' ),'',true );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');

编辑:这绝对是我的脚本如何调用的问题。如果我将脚本直接发布到页面中,则崩溃正在工作,但我看不到enque的任何问题,并且当我搜索代码时,脚本就在那里。这是订购问题吗?

这是由于JS或Jquery脚本文件引起的问题。我有同样的问题。我使用了不同的脚本文件。它解决了我的问题。

对于 CSS,请使用此

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

对于脚本,请使用以下内容:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

希望这也对您有所帮助!

最新更新