Fatal编程技术网
  • twitter-bootstrap/
  • Twitter bootstrap 运行NuGet更新后MVC引导导航栏不工作

Twitter bootstrap 运行NuGet更新后MVC引导导航栏不工作

twitter-bootstrap asp.net-mvc-5

Twitter bootstrap 运行NuGet更新后MVC引导导航栏不工作,twitter-bootstrap,asp.net-mvc-5,nuget-package,Twitter Bootstrap,Asp.net Mvc 5,Nuget Package,我们更新了所有NuGet软件包后，一个MVC应用程序坏了。在尝试了一切之后，我创建了一个新的MVC应用程序，更新了NuGet软件包和基本导航栏 <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class=

我们更新了所有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>



    

  • 

  • 

  • 



    

  • 

  •
。。。看起来像这样

…然后单击图标

你知道这是什么原因吗

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

谢谢

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

  • “导航条反转”为“导航条暗”，并使用颜色“背景暗”
  • 为按钮添加一些属性，如“aria控件”、“aria扩展”、“aria标签”和“数据目标”，以链接到另一个元素
  • 属性“id”到可折叠元素
  • 对于列表元素（标记li），应添加class=“导航项”
  • 对于未隐藏的链接列表元素，添加class=“导航链接”
  • 我建议在列表定义中加上“汽车先生”
    • 以下所有更改。测试

    

      

    • 

    • 

    • 

    

      

    • 

    • 

    

    谢谢你，德拉克。回答得很好
    
对于任何想要剃须刀代码的人，这里是我的：
    
[编辑：代码包括@Suhani和@Sagi/@Doug Dekker建议的更改
    
这是_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>

    

    
@ViewBag.Title-我的ASP.NET应用程序
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@ActionLink（“我的门户网站”、“索引”、“主页”、新的{area=”“}、新的{@class=“navbar品牌”}）

      

    • @Html.ActionLink（“Home”、“Index”、“Home”、null、new{@class=“nav link”}）
      • 

    • @Html.ActionLink（“About”、“About”、“Home”、null、new{@class=“nav link”}）
      • 

    • @Html.ActionLink（“联系人”，“联系人”，“主页”，空，新{@class=“nav link”}）
      • 

    
@Html.Partial（“_LoginPartial”）
@RenderBody（）

    
©；@DateTime.Now.Year-我的ASP.NET应用程序
    
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@RenderSection（“脚本”，必需：false）

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

    

    @使用Microsoft.AspNet.Identity
@如果（请求已验证）
{
使用（Html.BeginForm（“注销”、“帐户”、FormMethod.Post、新的{id=“logoutForm”、@class=“navbar right”}））
{
@Html.AntiForgeryToken（）

      

    • @Html.ActionLink（“Hello”+User.Identity.GetUserName（）+“！”、“Index”、“Manage”、routeValue:null、htmlAttributes:new{title=“Manage”、@class=“nav link”}）
      • 

    • 

    
}
}
其他的
{

      

    • @Html.ActionLink（“Register”、“Register”、“Account”、routeValue:null、htmlAttributes:new{id=“registerLink”、@class=“nav link”}）
      • 

    • @Html.ActionLink（“登录”、“登录”、“帐户”、路由值：null、htmlAttributes:new{id=“loginLink”、@class=“nav link”}）
      • 

    
}

    谢谢Jon！我尝试了代码，效果很好
    
将HTML属性添加到列表中的操作链接后，索引操作是红色的-不知何故MVC找不到索引方法。我在“主”控制器后添加了“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>

    

      

    • @Html.ActionLink（“Home”、“Index”、“Home”、null、new{@class=“nav link”}）
      • 

    • @Html.ActionLink（“About”、“About”、“Home”、null、new{@class=“nav link”}）
      • 

    • @Html.ActionLink（“联系人”，“联系人”，“主页”，空，新{@class=“nav link”}）
      • 

    

    谢谢Drac，回答得很好。对于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>

    

    

    只需卸载更新的模块。我很确定这是Antlr软件包和引导程序。将它们分别降级到3.4.1和3.3.0。这有助于解决我的问题。
    以上所有答案都令人惊讶
    
我的解决方案是临时性的，时间更短：
卸载引导并重新安装旧版本
    
在包管理器控制台中：
要卸载，请键入以下内容：
卸载包引导
    
完成后，重新安装工作正常的旧版本，例如：

    安装程序包bootstrap-版本3.3.7
    导致问题的原因是bootstrap 4无法识别bootstrap 3中的类，而bootstrap 3正是ASP.NET在这一点上使用的。只需从NuGet中降级到bootstrap 3.3.7，您就可以开始了。
    来得晚，但希望这对某些人有所帮助，因为这个问题是一个棘手的问题给我来个电话
    
我的
    工具栏
    在从
    v3
    更新到
    v4
    后被关闭。在我获得下面列出的必要参考资料之前，它无法工作。请注意，它们是本地参考资料，但应该与您的项目类似。

    以下是我从一个

    @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">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <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>
}

    

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

    

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

    

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