gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:20:21 24 4
gpt4 key购买 nike

创建了一个 MVC 5 元素,你想改变这个元素的菜单,因为它使用了 Bootwatch ,你想要实现的菜单如下

Menu

我做的第一件事是更改元素的总体样式,下载 bootstrap.css 文件

Download

然后我用我的 BundleConfig 替换了它,因为我之前有一个,这修改了我的元素的样式,但不包括前面提到的导航栏

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> 调用菜单时显示,但它立即再次折叠。

Implementation

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

对我有什么帮助吗?

最佳答案

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

关于html - 如何在 MVC 5 中实现菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50335824/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com