无法在移动设备上显示导航栏列表项

Question

我有以下navbar代码。

<div style="margin-bottom:60px; background-color:lightblue" class="navbar-header navbar-light navbar-fixed-top">

    <a class="navbar-brand" style="color:white;" rel="home" href="#" title="">
        <img style="max-width:60px; margin-top: -7px;" class="img-circle"
             src="~/Content/Images/Logo.jpeg"> <em>JOM</em>
    </a>
    <div id="navbar5" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li>@Html.ActionLink("Students", "Index", "Student")</li>
            <li>@Html.ActionLink("Books", "Index", "Book")</li>
            <li>@Html.ActionLink("Checkout", "Index", "Checkout")</li>
            <li>@Html.ActionLink("Checkin", "Index", "Checkin")</li>
        </ul>
    </div>
</div>

列表项目（即学生，书籍，结帐，签到）显示在桌面上，但不在移动设备上。谁能指出我在这里做错了什么？

如您所见，移动版没有4个链接。

Answer 1

您是否将导航栏包裹在.navbar中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">JOM</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li>@Html.ActionLink("Students", "Index", "Student")</li>
            <li>@Html.ActionLink("Books", "Index", "Book")</li>
            <li>@Html.ActionLink("Checkout", "Index", "Checkout")</li>
            <li>@Html.ActionLink("Checkin", "Index", "Checkin")</li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>