语义 UI 模块样式正确但没有响应

Question

我是 qui JS 和 Jquery 的新手，我担心我一定错过了一些基本的东西来引发这个错误：none 我尝试的语义模块包含在 html 中并使用 JS 启动似乎是响应式的，即使我只是从语义 ui 示例中复制代码段也是如此。

我使用 bower 将 Semantic UI 和 Jquery 安装到一个单独的 bower_component 目录，然后我将其作为附加内容根目录添加到 phpstorm 的项目目录中。我在 html header 中包含语义文件，路径都被识别：

    <link rel="stylesheet" href="semantic/dist/semantic.min.css">
    <script src="jquery/dist/jquery.min.js"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <script src="js/semantic_test.js"></script>

我将第一个示例 this link 中的 html 复制到 html 并将 js 复制到 "js/semantic_test.js"。在 Chrome 或 Safari 中，页面显示为静态，所有样式均正确但没有响应。

我尝试了一些 bootstrap 功能正常的组件。我还测试了 Jquery 和语义 UI 的 CDN 路径 - 仍然无法正常工作。我花了几个小时在谷歌上搜索，非常感谢您的帮助！

Answer 1

您是否将 jquery 代码包装在 document.ready

中

$(document).ready(function() {
 // your code here
 // ...
});

有时，当使用 JavaScript 初始化 html 组件的脚本在组件加载到 dom 之前运行时，就会发生这种情况。

语义 UI 模块样式正确但没有响应

Semantic UI modules correctly styled but not responsive

html

javascript

css

jquery

semantic-ui