javascript - 我无法使 SmartWizard Jquery 4 与 Bootstrap 4 一起使用

标签 javascript jquery bootstrap-4

我是 StackOverflow 的新手,我想询问是否有人可以帮助我修复我的代码。我无法使 SmartWizard jquery 4 工作。我绝对复制了每一行代码(除了 css 和 js 文件的源代码),但它仍然不起作用。抱歉,我不知道出了什么问题,我只是编码新手,希望您能帮助我理解这个小问题。

我将在此处附上我的源代码和图像。

我希望复制的 Jquery SmartWizard 代码来自 http://techlaboratory.net/smartwizard 。下载Zip文件并打开zip文件的examples文件夹下的index.html文件。

这是我想要复制的代码的输出: Output of the code I wish to copy

这是我的源代码。

<!DOCTYPE html>
<html>
<head>
     <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- Only difference is i'm using Bootstrap 4 -->
      <link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
      crossorigin="anonymous"/>

  <link href="/sample2/resources/css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
  <link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
  <link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
  <link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

 //the same as the code in index

 <script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>

</body>
</html>

这是我的项目文件夹架构:project folder architecture

这是我的代码的输出:My output

再次抱歉,我只是编码新手,感谢您回复我的问题。

编辑:我刚刚根据评论发现 Jquery SmartWizard 4 与 Bootstrap 4 不兼容/不兼容,但有人使它可以工作,正如评论者所说,“修改后可以工作。我仍然有小问题解决。谢谢”。有谁知道如何使 Jquery SmartWizard 4 与 Bootstrap 4 一起工作?非常感谢!

EDIT2:我现在让它与 Bootstrap 4 一起工作,这就是我所做的:

更改了这行代码:

来自: <script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>

致: <script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>

现在我的问题是额外的斜杠如何对 SmartWizard 获取其版本的方式产生影响,我很想知道为什么。多谢!但现在我可以让 Jquery SmartWizard 4.3.1 与 Bootstrap 一起使用。

最佳答案

为了使 Jquery SmartWizard 4 与 Bootstrap 4 一起工作,我必须更改代码行

来自:

<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>

致:

<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>

我对 css 文件做了同样的事情,所以现在看起来像这样

<link href="/sample2/resources//css/smart_wizard.min.css" rel="stylesheet" type="text/css" />

使用缩小版本,因为当我使用缩小版本但链接的语法是“/sample2/resources/css/smart_wizard.min.css”时,文档获取 SmartWizard v4.x 版本。我绝对不知道为什么会发生这种情况,在资源之后添加额外的斜杠会更改正在使用的版本,所以如果有人可以提供答案,那就太好了!多谢!干杯!

关于javascript - 我无法使 SmartWizard Jquery 4 与 Bootstrap 4 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49233682/

相关文章:

javascript - || 的正确用法是什么在 JavaScript 中

javascript - Chrome 开发者工具不显示动态 DOM 更新

javascript - 加载后 jQuery DataTables 按钮触发导致无限循环

css - 表单内联 Bootstrap 4 上的按钮位置中间行

javascript - 如何禁用不同大小的 Html 代码?

javascript - Angular JS删除Sinatra的方法

javascript - onkeypress 识别当前 div

javascript - 如何在div上下载图像?

javascript - 选择框在选择时禁用自身

html - 如何在 Bootstrap 中将导航项居中?