bootstrap 3.3.7 到 4beta2：带剃刀的导航栏不工作

debugcn 发表于 Dev

家庭影音

再会，

我有一个使用 bootstrap 3.3.7 的 asp.net MVC 项目。我想从那个版本迁移到 4 beta 2，为此我使用了来自Get bootstrap 的引导程序。但是我可以看到我的导航栏坏了。

我期待得到这样的图像（我从 Visual Studio 2015 的默认 MVC 项目中获得了这个导航栏，它使用了引导程序版本 3.3.7）

这是 v 4 beta 2 的导航栏代码：

    <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
    <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        @Html.ActionLink("my page", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home")</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home")</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

这适用于 v3.3.7

    <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>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

我已经包含了使用包所需的脚本和 css：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")

问题：如何修复我的导航栏？谢谢你。

家庭影音

我使用 nugget 将引导程序包更新到版本 4，这是从 v.3 转换为 v.4 的基本导航栏的代码

<nav class="navbar navbar-expand-lg navbar-light bg-light fix fixed-top">

    <div class="container">
        @Html.ActionLink("My page icon", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <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>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        @Html.ActionLink("one link", "Index", "controll1", null, new { @class = "nav-link" })
                    </li>
                    <li class="nav-item">
                        @Html.ActionLink("Manage other things", "Index", "controll2", null, new { @class = "nav-link" })
                    </li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。