个人中心
gpt4 book ai didi

css - Bootstrap 3 : Collapsible nav won't close

转载 作者：太空宇宙 更新时间：2023-11-03 17:38:12 27 4
gpt4 key购买 nike

我使用 Bootstrap 3 作为我的个人网站的框架，我必须为我的研究生类(class)编写代码。目前，我正在使用 Insite Design Lab 教程代码中的单页网站平滑滚动代码: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

我似乎也无法弄清楚如何设置将填满整个屏幕的页面高度，我也无法更改 Accordion 中面板的颜色。

在此先感谢您的帮助!

最佳答案

I can't get my collapsible menu to collapse on smaller screen.



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

I also can't seem to figure out how to set a page height that will fill the entire screen and I also can't change the color of the panels in my accordion.



页面高度应设置为自动，因为它应该与内容一样高。

至于 Accordion ，我不知道您指的是哪个 Accordion ，但这是一个简单的 CSS 问题，您可以通过更高的 CSS 规范或 !important 来解决。

关于css - Bootstrap 3 : Collapsible nav won't close，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29481509/

27 4 0
文章推荐： ruby - 如何在 ruby​​ Sinatra 中使用 strftime 本地化日期名称
文章推荐： javascript - div 按最多 4 位数字的价格排序，但不会发生 5 位数字的排序
文章推荐： ios - 带有 UIWebPaginationModeLeftToRight 的 UIWebView 背景颜色始终为白色
文章推荐： python - 重新初始化文件中的数字(具有不同数量的列？)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com