运行 NuGet 更新后 MVC 引导程序导航栏不起作用 [英] MVC bootstrap navbar not working after running NuGet updates

查看：20
本文介绍了运行 NuGet 更新后 MVC 引导程序导航栏不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我们更新所有 NuGet 包后，一个 MVC 应用程序崩溃了.在尝试了一切之后，我创建了一个新的 MVC 应用程序，更新了 NuGet 包和基本的导航栏...

<div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="/">应用名称</a>
<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="/">首页</a></li><li><a href="/Home/About">关于</a></li><li><a href="/Home/Contact">联系方式</a></li><ul class="nav navbar-nav navbar-right"><li><a href="/Account/Register" id="registerLink">注册</a></li><li><a href="/Account/Login" id="loginLink">登录</a></li>

...看起来像这样...

...然后点击图标...

任何想法可能导致这种情况?

尝试手动将 Bootstrap.css 和 Bootstrap.js 添加到 _Layout.vbhtml，但没有区别

谢谢

解决方案

最后，我管理了我和你的 HTML.与版本 3 相比，Bootstrap 4 有很多变化.关于你的标记，你必须改变:

  1. Navbar-inverse"到Navbar-dark"并使用颜色bg-dark".
  2. 为按钮添加一些属性，如用于链接到另一个元素的aria-controls"、aria-expanded"、aria-label"和data-target".
  3. 属性id"到可折叠元素.
  4. 对于列表元素(标签 LI)应该添加 class="nav-item"
  5. 对于非列表元素的链接，添加 class="nav-link".
  6. 我建议在列表定义中添加mr-auto".

以下所有更改.在此处测试.

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark"><div class="容器"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><a class="navbar-brand" href="/">应用名称</a><div class="navbar-collapse collapse" id="navbarSupportedContent"><ul class="nav navbar-nav mr-auto"><li class="nav-item"><a href="/" class="nav-link">首页</a></li><li class="nav-item"><a href="/Home/About" class="nav-link">关于</a></li><li class="nav-item"><a href="/Home/Contact" class="nav-link">联系方式</a></li><ul class="nav navbar-nav navbar-right mr-auto"><li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">注册</a></li><li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">登录</a></li>

</nav>

An MVC app broke after we updated all the NuGet packages. After trying everything I created a new MVC app, updated the NuGet packages and the basic navbar...

<div class="navbar navbar-inverse 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="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Application name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Home/Contact">Contact</a></li>
            </ul>

<ul class="nav navbar-nav navbar-right">
    <li><a href="/Account/Register" id="registerLink">Register</a></li>
    <li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>


        </div>
    </div>
</div>

... looks like this ...

...and clicking the icon...

Any ideas what could be causing this?

Have tried manually adding Bootstrap.css and Bootstrap.js to _Layout.vbhtml, but no difference

Thank you

解决方案

Finally, I managed my HTML and yours. There're a lot of changes in Bootstrap 4 in compare to version 3. Regarding your markup, you have to change:

  1. "Navbar-inverse" to "Navbar-dark" and use color "bg-dark".
  2. Add few attributes to button, as "aria-controls", "aria-expanded", "aria-label" and "data-target" for link to another element.
  3. Property "id" to collapsable element.
  4. For list elements (tag LI) should be added class="nav-item"
  5. For links unside list elements add class="nav-link".
  6. I suggest to add "mr-auto" to list definiton.

All changes below. Tested here.

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    </button>
    <a class="navbar-brand" href="/">Application name</a>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
        <li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">Register</a></li>
        <li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">Log in</a></li>
      </ul>

    </div>
  </div>
</nav>

这篇关于运行 NuGet 更新后 MVC 引导程序导航栏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆