Question

当屏幕太小时，Bootstrap中的导航栏不会关闭。例如，在移动设备上，除非手机处于横向模式，否则它无法正常工作。这是我的代码：

<nav class="navbar navbar-default">
   <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="index.html">
                <img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
            </a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="/blog">BLOG</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

我对Bootstrap不太熟悉，所以我无法判断是否有一些明显错误的事情。是否有任何理由说明在屏幕变得太小后折叠按钮不会下拉？

    <!DOCTYPE html>
<html lang="en">
<head>
        <title> My site! </title>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
    <script src="js/index.js"></script>
    <!-- Typing effect on homepage is in js/typed.js --> 
    <script src="js/typed.js"></script>



    <link rel="stylessheet" type="text/css" href="bootstrap-social-gh-pages/bootstrap-social.css">
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="css/styles.css">



</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                </button>
                <a class="navbar-brand" href="index.html">
                    <img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
                </a>

            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="/blog">BLOG</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container-fluid text-center push-center" >
        <div style="background:transparent !important" class="jumbotron">
            <h1 id="main">Hi there</h1>
            <p> <i class="fa fa-globe" aria-hidden="true"></i> <span class="element"></span> </p> 

            <p> <i class="fa fa-briefcase" aria-hidden="true"></i> <span class="element1"></span> </p> 

            <p> <span class="element2"> </span> <span class="rest"></span> </p> 


        </div>

    </div>




</body>

</html>

当屏幕太小时，导航栏折叠按钮（三个条形）不起作用

0 个答案: