您需要正确组织和构建 HTML。问题是你的混合和包括脚本，风格到处都是。顺序很重要。
Javascript 错误 $ is not a function 是因为您使用的是 jQuery.noConflict(); 所以而不是这样做：
$(function() {
$('[data-rspnsv]').rspnsv({
delay: 200,
duration: 3000
});
});
将其更改为（将$ 替换为jQuery）
jQuery(function() {
jQuery('[data-rspnsv]').rspnsv({
delay: 200,
duration: 3000
});
});
或者
jQuery(...).slabText is not a function 据我所知，您在声明函数jQuery("h1.slabbed").slabText({..}) 时没有添加对插件的先前引用。等等..
我还建议不要将您的 JavaScript 内联并考虑按如下方式组织您的函数：
var $Slabbed = jQuery("h1.slabbed"),
$Carouselitem = jQuery(".carousel");
window.myApp = {
SlabText : function(){
if($Slabbed.length > 0){
$Slabbed.slabText({
viewportBreakpoint: 380,
minCharsPerLine: 10
});
}
},
Carousel: function(){
if($Carouselitem.length > 0){
$Carouselitem.carousel({
interval: 15e3,
pause: "hover"
});
}
},
Init : function(){
// Init SlabText
myApp.SlabText();
// Init Carousel
myApp.Carousel();
}
};
jQuery(document).ready(function () {
myApp.init();
});
关于您的navbar，我在复制您的示例时没有问题。但是，我看到三个bootstrap.min.css 文件-什么是什么？？
在<head></head> 部分尝试此操作并仅添加您的 CSS 并保留 JS 以供以后使用
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/vendor.css"/>
<link rel="stylesheet" href="css/template-styles.css"/>
<link rel="stylesheet" href="css/custom.css"/>
-
bootstrap.min.css - 暂时保留引导程序，以免弄乱默认样式。一旦你足够成熟，你就可以随心所欲地调整它
-
vendor.css - 插件/供应商
-
template-styles.css - 您的模板样式
-
custom.css - 您自己的自定义样式
然后在您的 <body> 结束标记之前添加您的 JS 并调用您的 App.init();
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript" src="js/jquery-noconflict.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
App.init();
});
</script>
</body>
演示 JSFiddle - 尝试调整浏览器大小
请不要进行复制/粘贴编程，因为此演示不能解决您的问题。我正在从 CDN 加载引导库，并添加了您的自定义样式，其中还包含引导程序的默认样式。这是一团糟。如前所述，您需要清理所有样式！这只是一个概念证明，您的 navbar 标记是正确的并且可以正常工作。