twitter-bootstrap 运行 NuGet 更新后 MVC 引导程序导航栏不起作用

Question

提问by gchq

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...

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

<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

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

Thank you

谢谢

Answer 1

回答by Drac

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:

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

"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.

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

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>

Answer 2

回答by Jon Roberts

Thanks, Drac. Great answer.

谢谢，德拉克。很好的答案。

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

对于任何想要 Razor 代码的人，这是我的：

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

[编辑：代码包括@Suhani 和@Sagi / @Doug Dekker 建议的更改

This is _Layout.cshtml

这是_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

这是 _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", @class = "nav-link" })</li>
        <li class="nav-item"><a class="nav-link" 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>
}

Answer 3

回答by Sagi

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

谢谢德拉克，很好的答案。对于 3.3 版中的“汉堡包”按钮，添加以下代码：

            <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>

Answer 4

回答by Suhani

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 属性添加到列表中的操作链接后，索引操作为红色 - 不知何故 MVC 找不到索引方法。我在“Home”控制器之后添加了“null”，它就消失了。把它张贴在这里，所以有人可以从中受益。

<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>

Answer 5

回答by Thys

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

在包管理器控制台中：要卸载，请键入：uninstall-package bootstrap

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

完成后，重新安装有效的旧版本，例如： install-package bootstrap -Version 3.3.7

Answer 6

回答by szdrnja

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 downgradeto Bootstrap 3.3.7 from NuGet and you'll be good to go.

导致此问题的原因是 Bootstrap 4 无法识别 Bootstrap 3 中的类，而 Bootstrap 3 是 ASP .NET 此刻使用的。只需从 NuGet降级到 Bootstrap 3.3.7 就可以了。

Answer 7

回答by Pishang Ujeniya

WORKING WITH MVC WebAPI PROJECT

使用 MVC WebAPI 项目

File Name : _Layout.cshtml

文件名：_Layout.cshtml

Simply replace the body first nav-bardivtag content with the following and check it.

只需将 body firstnav-bardiv标签内容替换为以下内容并检查它。

<div class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
                @Html.ActionLink("Ebille", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    <li class="nav-item">@Html.ActionLink("API", "Index", "Help", new { area = "" }, new { @class = "nav-link" })</li>
                </ul>
            </div>
        </div>
    </div>

Add Fontawesome inside headtag. Copy the code provided here

在head标签内添加 Fontawesome 。复制此处提供的代码

The above content is tested for initial default app created by Visual Studio 2019 MVC + WebAPI project.

以上内容针对 Visual Studio 2019 MVC + WebAPI 项目创建的初始默认应用进行测试。

Answer 8

回答by Simranjit Kaur

Use Bootstrap 3 themes https://bootswatch.com/3/to make it work in ASP.NET MVC 5 application. Download the bootstrap.css file and place it in your content folder. And update the reference if you want in BundleConfig.cs under Content.

使用 Bootstrap 3 主题https://bootswatch.com/3/使其在 ASP.NET MVC 5 应用程序中工作。下载 bootstrap.css 文件并将其放在您的内容文件夹中。如果需要，请在内容下的 BundleConfig.cs 中更新参考。

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap-lumen3.css",
                      "~/Content/site.css"));

Since there is no backward compatibility from bootstrap 4.3 to 3. Its better to use bootstrap 3.

由于从 bootstrap 4.3 到 3 没有向后兼容性。最好使用 bootstrap 3。

Answer 9

回答by Mithun Balakrishnan

This could have most probably happened because of the Bootstrap Version issue. If using older version, updating to new Bootstrap version can break UI. You have to manually convert the older tags and attributes to new one.

这很可能是由于 Bootstrap 版本问题而发生的。如果使用旧版本，更新到新的 Bootstrap 版本可能会破坏 UI。您必须手动将旧标签和属性转换为新标签和属性。

Or temporarily you can fix the issue by checking which version of Bootstrap you were using earlier and restoring to older version can fix UI issue at immediate effect.

或者，您可以暂时通过检查您之前使用的 Bootstrap 版本来解决问题，恢复到旧版本可以立即修复 UI 问题。

Answer 10

回答by smoore4

The easiest solution, IMHO, is to go to one of the Bootswatch themes and view the Navbar components:

恕我直言，最简单的解决方案是转到 Bootswatch 主题之一并查看导航栏组件：

https://bootswatch.com/cerulean

Click the navbar you want to mimick and it will show you the source code for the navbar. You can do this for different versions of Bootstrap too. This example is for 4.4.1.

单击您要模仿的导航栏，它将显示导航栏的源代码。您也可以对不同版本的 Bootstrap 执行此操作。此示例适用于 4.4.1。

The navbar image below will give you the code that follows.

下面的导航栏图像将为您提供以下代码。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

twitter-bootstrap 运行 NuGet 更新后 MVC 引导程序导航栏不起作用

提问by gchq

回答by Drac

回答by Jon Roberts

回答by Sagi

回答by Suhani

回答by Thys

回答by szdrnja

回答by Pishang Ujeniya

回答by Simranjit Kaur

回答by Mithun Balakrishnan

回答by smoore4

相关推荐

最近更新

标签

twitter-bootstrap 运行 NuGet 更新后 MVC 引导程序导航栏不起作用

提问by gchq

回答by Drac

回答by Jon Roberts

回答by Sagi

回答by Suhani

回答by Thys

回答by szdrnja

回答by Pishang Ujeniya

回答by Simranjit Kaur

回答by Mithun Balakrishnan

回答by smoore4

相关推荐

twitter-bootstrap 使 flexbox 在 IE11 中工作

twitter-bootstrap 如何使用 Bootstrap 4 在一行中居中文本

twitter-bootstrap 使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）

twitter-bootstrap Bootstrap 4 导航药丸不起作用

相关推荐

最近更新

标签