Question

我正在使用Bootstrap 3作为我个人网站的框架，我必须为我的毕业计划编码。目前，我正在使用Insite Design Lab Tutorial Code http://www.insitedesignlab.com/how-to-make-a-single-page-website/中单页网站的平滑滚动代码。

我无法让我的可折叠菜单在较小的屏幕上崩溃。这是我的代码：

<!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

我似乎也无法弄清楚如何设置一个能够填满整个屏幕的页面高度，而且我也无法改变手风琴中面板的颜色。

提前感谢您的帮助！

Answer 1

我不能让我的可折叠菜单在较小的屏幕上崩溃。

我不确定这是否是您想要的，但您可以将此代码添加到您的脚本中：

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

它应该在较小的屏幕上折叠导航栏。

Answer 2

我无法将可折叠菜单折叠在较小的屏幕上。

它在最新的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>

选择其中一项，不要将所有内容加载两次。

此外，只应在IE 8及更早版本（以及HTML5shiv）中加载respond.js，请参阅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特性或重要来解决。

Bootstrap 3：可折叠导航无法关闭

2 个答案: