Question

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

我做的第一件事是更改项目的一般样式，下载bootstrap.css文件

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

要放置所需的Navbar，请在_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>

但是在执行我的项目时，我发现以下问题，我的菜单无法正常响应响应调用，这意味着当我更改（缩小）浏览器的大小并从我的{{调用菜单时1}}显示，但它会立即再次崩溃。

所以它没有以正确的方式运作，我一直试图解决这个问题，但我没有取得好成绩。我已经安装了Bootstrap和Bootstrap.less软件包，有人可以帮帮我吗？发生了什么事？

对我有任何帮助吗？

Answer 1

我相信你缺少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>

Answer 2

您可以查看您的css以获取以下信息：

.navbar-collapse.collapse {
        display: none!important;
    }

我可以使用您发布的内容在新的MVC 5项目中获得工作菜单，但我没有与您相同的CSS。

请查看类似的问题：Bootstrap mobile menu wont stay open

如何在MVC 5中实现Menu

2 个答案: