Question

我在将可折叠导航栏加载到页面时遇到问题 - 当您缩小屏幕时会出现按钮，但是当我点击它时，没有任何反应。请帮忙。

以下是我的HTML：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    
    <title>@ViewBag.Title - OTANI TIRE CO., LTD.</title>
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap")"></script>    
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="nav navbar-nav">
                    <li>
                        <a href="@Url.Action("Index", "Home")" title="Index" class="links">
                            <img alt="Index" src="@Url.Content("~/Content/Logo-Otani-3D_H2.png")">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">                    
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("New Arrivals", "NewArrivals", "Home")</li>
                    <li>@Html.ActionLink("Brochure", "Brochure1", "Home")</li>                               <li>@Html.ActionLink("Awards", "Awards", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <br>
        <br>
        <br>
        <br>
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - OTANI TIRE CO., LTD. - ALL RIGHTS RESERVED.</p>
        </footer>
    </div>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>

＆＃13;

Answer 1

首先将班级navbar-brand添加到您的徽标中。它的跨度阻止了下拉按钮

<a href="@Url.Action("Index", "Home")" title="Index" class="links navbar-brand">
    <img alt="Index" src="@Url.Content("~/Content/Logo-Otani-3D_H2.png")">
</a>

并确保您的Javascript文件已加载

详情请https://plnkr.co/edit/J8XEdyzVvtCIoguNOLVc

Bootstrap Navbar-Collapse无法正常工作

1 个答案: