Question

首先我的问题：如何在超小屏幕中查看我的菜单崩溃？

以下是更多信息：我正在使用Joomla 3.4.x构建一个网站。我已经制作了自己的Bootstrap 3模板。这是测试服务器的URL：http://chjc.nl.testbyte.nl

除了超小设备外，菜单按计划工作：当我打开页面时，菜单应该隐藏。然后应该显示我点击“汉堡包”按钮的时间。在右上角。相反，它总是显示并接管大部分智能手机屏幕。如何在加载页面时使其崩溃？

我甚至不确定这是一个CSS问题，还是jQuery，Bootstrap或者你有什么......

提前完成，

汤姆 Thomsterdam.nl

Answer 1

您需要正确组织和构建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>部分＆amp;只添加你的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加载引导程序库并添加了自定义样式，这些样式也包含bootstrap的默认样式。这是一团糟。如前所述，您需要清理所有样式！这只是一个概念验证，即navbar标记是正确的＆amp;按照预期工作。

Bootstrap 3 CSS菜单折叠了额外的小窗口

1 个答案: