可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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:

"Navbar-inverse" to "Navbar-dark" and use color "bg-dark".
Add few attributes to button, as "aria-controls", "aria-expanded", "aria-label" and "data-target" for link to another element.
Property "id" to collapsable element.
For list elements (tag LI) should be added class="nav-item"
For links unside list elements add class="nav-link".
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>

回答2:

Thanks, Drac. Great answer.

For anyone that wants the Razor code, here's mine:

[EDIT: Code includes changes suggested by @Suhani and @Sagi / @Doug Dekker

This is _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <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">
              <span class="navbar-toggler-icon"></span>
            </button>
        @Html.ActionLink("My Web Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <div class="navbar-collapse collapse" id="navbarSupportedContent">

            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "nav-link" })</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</nav>

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

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

and this is _LoginPartial.cshtml

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item">@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
        <li class="nav-item"><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
}
}
else
{
    <ul class="nav navbar-nav navbar-right mr-auto">
    <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" })</li>
    <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" })</li>
    </ul>
}

回答3:

Thanks Drac , great answer. For a "hamburger" button just like in version 3.3, add this code :

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

回答4:

Thanks Jon! I tried the code and works well.

After adding the HTML Attribute to the Action Link in lists, the Index action was red - somehow MVC couldn't find the Index Method. I added "null" after the "Home" Controller and it went away. Posting it here , so someone can benefit from it.

@Html.ActionLink("Home","Index", "Home",null, new { @class = "nav-link" }) @Html.ActionLink("About", "About", "Home",null, new { @class = "nav-link" }) @Html.ActionLink("Contact", "Contact", "Home",null, new { @class = "nav-link" })

回答5:

Just uninstall the updated modules. I'm pretty sure it's Antlr Package and Bootstrap. Downgrade them to 3.4.1 and 3.3.0 respectively. This helped my issue.

回答6:

All of the above answers amazing.

My solution is temporary and shorter: Uninstall bootstrap and reinstall older version.

In Package-manager console: To uninstall, type this: uninstall-package bootstrap

once done, reinstall the old version which worked, eg: install-package bootstrap -Version 3.3.7

回答7:

What's causing the issue is that Bootstrap 4 can't recognize classes from Bootstrap 3, and Bootstrap 3 is what ASP .NET uses at this point. Just downgrade to Bootstrap 3.3.7 from NuGet and you'll be good to go.

回答8:

Late arrival but hope this helps someone as this issue was a struggle for me.

My toolbar was borked after updating from v3 to v4. Didn't work until I had the necessary references listed below. Please note that they are local references, but they should be similar to your project.

<!DOCTYPE html>
<html>
<head>
   <!-- Latest compiled and minified CSS -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <!-- jQuery library -->
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="~/Scripts/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
</head>
</html>