Question

我是网络开发和HTML的新手。你能告诉我为什么当屏幕调整到较小的屏幕时，我的导航栏菜单项没有显示在折叠的导航菜单中。

右侧的折叠导航菜单缺少菜单项。使用Bootstrap 3

<html>
<head>
    <meta charset="UTF-8">
    <title>My First Web App</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">


</head>
<body>
<nav class = "navbar navbar-inverse" >
    <div class = "container-fluid">
        <div class = "navbar-header">
            <button type="button" class = "navbar-toggle" data-toggle  = "collapse" data-target = "topNavBar">
                <span class = "icon-bar" ></span>
                <span class = "icon-bar" ></span>
                <span class = "icon-bar" ></span>
            </button>


            <a class="navbar-brand"  href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp; Home</a>  

        </div>
        <div class="collapse navbar-collapse" id="topNavBar">

        <!-- Collapsed menu itemsItems -->
        <ul class="nav navbar-nav">
                <li><a href="#"><span  aria-hidden="true"></span>&nbsp; Python</a></li>
                <li><a href="#"><span  aria-hidden="true"></span>&nbsp; Java</a></li>
                <li><a href="#"><span  aria-hidden="true"></span>&nbsp; C++</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp; Mail</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; Me
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout
                    </a>
                </li>
            </ul>


        </div>

    </div>
</nav>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

＆＃13;

<html>
<head>
    <meta charset="UTF-8">
    <title>My First Web App</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



</head>
<body>
<nav class = "navbar navbar-inverse" >
    <div class = "container-fluid">
        <div class = "navbar-header">
            <button type="button" class = "navbar-toggle" data-toggle  = "collapse" data-target = "#topNavBar"> <!--here-->
                <span class = "icon-bar" ></span>
                <span class = "icon-bar" ></span>
                <span class = "icon-bar" ></span>
            </button>


            <a class="navbar-brand"  href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp; Home</a>  

        </div>
        <div class="collapse navbar-collapse" id="topNavBar">

        <!-- Collapsed menu itemsItems -->
        <ul class="nav navbar-nav">
                <li><a href="#"><span  aria-hidden="true"></span>&nbsp; Python</a></li>
                <li><a href="#"><span  aria-hidden="true"></span>&nbsp; Java</a></li>
                <li><a href="#"><span  aria-hidden="true"></span>&nbsp; C++</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp; Mail</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; Me
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout
                    </a>
                </li>
            </ul>


        </div>

    </div>
</nav>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

HTML - 折叠的导航菜单不显示菜单项

1 个答案: