在 ASP.NET MVC 显示问题中更改引导主题答案

【问题标题】：Changing Bootstrap Themes in ASP.NET MVC display issues在 ASP.NET MVC 显示问题中更改引导主题
【发布时间】：2018-07-12 13:00:32
【问题描述】：

我有一个 MVC 项目，我已将默认 Bootstrap 主题更改为 Bootswatch - Cosmos，但它为我提供了导航栏的附加结果。

Header display issue image

最初我运行的是 Bootstrap 3.0，并使用 Bootswatch 3.0 来确保没有版本冲突。

我已采取以下步骤：

将 cosmos-boostrap.css 和 cosmos-boostrap.min.css 添加到内容文件夹

引用我的 BundleConfig.cs 中的 css 文件：

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

查看我的 _Layout.cshtml 以获取样式参考：
```
@Styles.Render("~/Content/css")
```
将 Bootstrap 升级到 v4 并尝试了 Cosmos v4，但仍然得到相同的结果。

这似乎只是导航栏的问题，因为其他 Cosmos 字体和按钮似乎显示正常。我还测试了其他一些 Bootstrap 主题，对于导航栏的结果相同。

任何帮助将不胜感激。

编辑：导航栏的 HTML 如下：

<body>
<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("Portal", "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>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - TEST IT SOLUTIONS</p>
    </footer>
</div>

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

【问题讨论】：

标签： css asp.net asp.net-mvc twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 4 几乎完全重写了 Bootstrap 3，因此，两个版本完全彼此不兼容。

因此，为 Bootstrap 3 设计的 Bootstrap 主题必须手动迁移到 Bootstrap 4。因为这两个版本非常不同，所以没有简单或自动化的方法可以做到这一点。任何自动化迁移的尝试都会留下大量需要手动调整的内容。

附：如果您只想修复标题，请在您的问题中发布 complete code snippet（HTML 输出），即在此处发布您当前的代码。

编辑：

根据您现在发布的代码 sn-p，有一点很清楚：您的主题不是 Bootstrap 4 主题，并且与 Bootstrap 4 不兼容。您所拥有的是 Bootstrap 3 代码。

这是特定导航栏的 Bootstrap 4 代码的样子（您需要根据需要为 ASP.NET 代码调整它；单击下面的“运行代码 sn-p”按钮以查看它的实际效果）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">BrandName</a>
        <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">
                <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="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- End of navbar -->

<div style="padding:1000px 0;">hi</div>

【讨论】：

谢谢。升级到 BS4 后，我使用了全新的 BS4 兼容主题，所以我认为这不是问题。将编辑我的帖子以显示 HTML。
不，那里的代码绝对不是 Bootstrap 4。它是 Bootstrap 3。谁把它作为“B4 兼容主题”出售，试图欺骗你。
刚刚使用导航栏的 Bootstrap 4 代码更新了我的答案。您需要根据需要针对 ASP.NET 进行调整，但我的代码 sn-p 为您提供了一个有效的 Bootstrap 4 导航栏，其属性/功能与您当前的 Bootstrap 3 导航栏相同。