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

【问题标题】：bootstrap 3.3.7 to 4beta2 : nav bar with razor not workingbootstrap 3.3.7 到 4beta2：带有剃须刀的导航栏不工作
【发布时间】：2018-05-07 13:50:34
【问题描述】：

早安，

我有一个使用 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")

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

【问题讨论】：

你的意思是“破碎”你没有看到填充？检查 css 文件是否已加载/其他一些 css 正在覆盖这些元素的 css。使用开发工具找出正在应用的 css 并将其与工作示例进行比较。
我的意思是说引导样式不起作用，即使我使用了所有需要的参考。
您需要将.nav-link 类添加到您的a 标签中，请参阅Docs 了解更多信息。
你解决了吗，我也有同样的问题，除了所有的格式都消失了。
我建议您使用 nuget 包更新到 v4，请在下面查看我的答案

标签： html css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

我使用 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>

【讨论】：