Bootstrap 3 CSS菜單崩潰超小窗口

首先我的問題：如何使我的菜單崩潰時，在額外的小屏幕查看？Bootstrap 3 CSS菜單崩潰超小窗口

以下是更多信息：我正在用Joomla 3.4.x構建一個網站。我製作了自己的Bootstrap 3模板。以下是測試服務器的URL：http://chjc.nl.testbyte.nl

除了額外的小設備外，菜單按照計劃運行：當我打開頁面時，菜單應該隱藏。然後，當我點擊右上角的「漢堡按鈕」時，它會顯示。相反，它總是顯示並接管大部分智能手機屏幕。我怎樣才能讓它在加載頁面時崩潰？

我甚至不知道這是一個CSS問題，或jQuery的，引導或者你有什麼...

Thanx提前，

託姆 Thomsterdam.nl

2015-10-20 Thomsterdam Web Design

您好，我想您的標記是好的，這裏是一個工作演示（https://jsfiddle.net/t4ym3/101/embedded/result/）。但是，我可以看到一些JavaScript錯誤，解決這個問題，如果問題沒有解決，回到我們身邊？ –

thankxs raja。我查看了JavaScript，並在我的Web開發控制檯中發現了一些錯誤消息。問題是：我對JavaScript和/或jQuery一無所知。所以，如果任何人都可以調試，請幫助。 –

當然我可以試試.. –

你需要正確地組織和構建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，我沒有問題重現你的example.However，我看到有三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標記正確&正常工作。

來源

2015-10-20 09:54:07

Raja：非常感謝你所做的一切。我以前應該告訴過你。今天，我們在https://www.chjc.nl網站上發佈了這個網站。您可以想象我必須確定我的優先級，而智能手機菜單不在列表的頂部。我曾研究過你的建議，並能從我從其他人那裏複製的app.js中刪除一些javascript，但只是在無知中。當我查看它時，我修剪了該文件，只保留了「縮小導航欄滾動位」位。 –

我不知道你對Joomla有多瞭解，但許多擴展添加了他們自己的js和css，所以你會看到3個名爲bootstrap.min.css的文件。只有/templates/thomsterdam-bootstrap-3/css/bootstrap.min.css包含整個網站的樣式，其他則用於2個擴展。我已經非常廣泛地編輯了引導程序的CSS，因此我自己的bootstrap.min.css。我會研究你建議的壓縮選項，這裏有一些joomla擴展。我也會研究你的小提琴樣本，並希望解決智能手機菜單問題。還有人感興趣嗎？我接受建議。 –

Bootstrap 3 CSS菜單崩潰超小窗口

回答

相關問題