Bootstrap 3：可摺疊的導航不會關閉

我使用Bootstrap 3作爲我的個人網站的框架，我必須爲我的畢業生程序編寫代碼。目前，我使用Insite Design Lab教程代碼：http://www.insitedesignlab.com/how-to-make-a-single-page-website/的單頁網站使用平滑滾動代碼。Bootstrap 3：可摺疊的導航不會關閉

我無法讓我的可摺疊菜單在較小的屏幕上摺疊。這裏是我的代碼：

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <link href='http://fonts.googleapis.com/css?family=Oswald|Lato|Roboto+Slab' rel='stylesheet' type='text/css'> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Bootstrap & Fonts--> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/custom.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script src="js/respond.js"></script> 
</head> 

<body> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    <!--Body --> 
    <div id="container"> 
     <!--Test Nav from Lynda.com Tutorial --> 
      <!-- Row 1: navigation --> 
      <div class="row"> 
       <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
          <span class="sr-only">Toggle Navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
        <div class="collapse navbar-collapse" id="collapse"> 
         <ul class="nav navbar-nav"> 
          <li><a href="#home">Home</a></li> 
          <li><a href="#portfolio">Portfolio</a></li> 
          <li><a href="#resume">Résumé</a></li> 
          <li><a href="#connect">Connect</a></li> 
         </ul> 
        </div> 
       </nav> 
      </div> 
    </div><!-- Container End --> 

<!-- Insite Design Lab Tutorial Code: http://www.insitedesignlab.com/how-to-make-a-single-page-website/-->    
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
         $(".contactLink").click(function(){ 
          if ($("#contactForm").is(":hidden")){ 
           $("#contactForm").slideDown("slow"); 
          } 
          else{ 
           $("#contactForm").slideUp("slow"); 
          } 
         }); 
        }); 
        function closeForm(){ 
         $("#messageSent").show("slow"); 
         setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000); 
        } 

     $(document).ready(function() { 
      function filterPath(string) { 
      return string 
       .replace(/^\//,'') 
       .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
       .replace(/\/$/,''); 
      } 
      $('a[href*=#]').each(function() { 
      if (filterPath(location.pathname) == filterPath(this.pathname) 
      && location.hostname == this.hostname 
      && this.hash.replace(/#/,'')) { 
       var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
       var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
       if ($target) { 
       var targetOffset = $target.offset().top -10; 
       $(this).click(function() { 
        $('html, body').animate({scrollTop: targetOffset}, 1000); 
        var d = document.createElement("div"); 
       d.style.height = "101%"; 
       d.style.overflow = "hidden"; 
       document.body.appendChild(d); 
       window.scrollTo(0,scrollToM); 
       setTimeout(function() { 
       d.parentNode.removeChild(d); 
        }, 10); 
        return false; 
       }); 
       } 
      } 
      }); 
     }); 
     /*! Smooth Scroll - v1.4.5 - 2012-07-22 
     * Copyright (c) 2012 Karl Swedberg; Licensed MIT, GPL */ 
     </script> 

</body> 
<!-- Body End -->

我刪除了大部分的網站上實際的頁面，但我離開了頭，導航和腳本信息。我的網站的鏈接是http://www.auburn.edu/~tbd0011

我似乎也無法弄清楚如何設置頁面高度將填滿整個屏幕，我也不能改變我的手風琴面板的顏色。

在此先感謝您的幫助！

來源

2015-04-06 teebeedee

小屏幕是什麼意思？您是否在使用任何可能會干擾的媒體查詢？ –

我沒有使用Bootstrap框架本身的列限制之外的任何媒體查詢（並且我沒有添加過去用於中畫面的那些列表）。通過更小的屏幕，我的意思是屏幕是移動的 - 和平板電腦大小。這些屏幕要求粘性頂部導航欄通過菜單鏈接摺疊成漢堡包/三角形圖標。 – teebeedee

你包含jQuery兩次。嘗試消除其中之一。 – Sebsemillia

我無法讓我的可摺疊菜單在較小的屏幕上摺疊。

它在最新的Firefox工作正常，當我嘗試在打開後關閉摺疊菜單時出現問題。

，我肯定會用清潔代碼開始 - 在head，加載這兩個腳本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

然後你<body>從不同的來源後，再次加載它們。

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

選擇其中之一，不要加載所有內容兩次。

另外，respond.js應該僅在IE 8及更早版本中加載（與HTML5shiv一起），請參閱Bootstrap docs。

<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]-->

我也似乎無法弄清楚如何設置頁面的高度，將填滿整個屏幕，我也不能在我的手風琴更改面板的顏色。

頁面高度應設置爲自動，因爲它應該與內容一樣高。

至於手風琴，我不知道你是哪個手風琴，但這是一個簡單的CSS問題，你可以通過更高的CSS特性或！重要的解決。

來源

2015-04-08 15:23:59 TeeJay

我無法讓我的摺疊菜單在較小的屏幕上摺疊。

我不知道這是否是你想要的，但你可以將此代碼添加到您的腳本：

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){ 
    if($(window).width()<768){ 
    $(".navbar-collapse").collapse('hide'); 
    } 
});

應該崩潰在小屏幕上導航欄。

來源

2015-04-08 13:12:47 Zee

Bootstrap 3：可摺疊的導航不會關閉

回答

相關問題