时间戳

首页 > 解决方案 > 如何在 MVC 5 中实现菜单

html - 如何在 MVC 5 中实现菜单

问题描述

创建了一个 MVC 5 项目，您想更改此项目的菜单，因为它使用了Bootwatch，您要实现的菜单如下

菜单

我做的第一件事是改变我项目的总体风格，下载 bootstrap.css 文件

下载

然后我用我的 BundleConfig 替换它，因为我以前有一个，这修改了我的项目的样式，但不包括前面提到的导航栏

捆绑配置

要放置您想要的导航栏，请在我的 _Layout.cshtml 中实现以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Muebles Pangal</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-success">
            <a class="navbar-brand" href="#">Muebles Pangal</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Categorias")">Categorias </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Productoes")">Productos </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Ubicacions")">Proveedores </a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
                </form>
            </div>
        </nav>
        </div>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - Sistema Bodega</p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

但是在执行我的项目时，我发现以下问题，我的菜单无法很好地响应响应调用，这意味着当我更改（缩小）浏览器的大小并从我的<span class = "navbar- toggler-icon "> </ span>this 中调用菜单时，但是它立即再次崩溃。

执行

所以它不能以正确的方式工作，我已经尝试解决这个问题好几天了，但我没有得到好的结果。我已经安装了 Bootstrap 和 Bootstrap.less 软件包，有人可以帮助我吗？这是怎么回事？

对我有什么帮助吗？

标签： htmlcssasp.net-mvctwitter-bootstrap-3bootstrap-4

解决方案

我相信您缺少 jQuery.min.js，或者它可能在您的代码结构中以错误的顺序放置。希望这个片段有帮助！

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
    <a class="navbar-brand" href="#">Muebles Pangal</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Categorias ")">Categorias </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Productoes ")">Productos </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Ubicacions ")">Proveedores </a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
      </form>
    </div>
  </nav>

推荐阅读