Bootstrap angular5/MVC 中的布局更改

Question

我在我的应用程序中编写了一个基本菜单，该菜单水平横跨页面顶部并位于我的 _Layout.cshtml 文件中。这最初是在带有 Angular 2 的 .Net Core 1.1 中。我还使用了 Bootswatch 的主题。

我将我的应用程序升级到 .Net Core 2 和 Angular 5，并且还迁移到了 Webpack。我将 bootstrap 升级到版本 4。现在当我运行同一段代码时，菜单向左并垂直移动。这是我的原始代码，我需要做什么才能使它再次成为顶部和水平。

<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="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">My Site</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact t</a></li>
            </ul>
            @await Html.PartialAsync("_LoginPartial")
        </div>
    </div>
</div>

Answer 1

好的，问题是 webpack 无法识别 bootswatch v4。在我的 Packages.json 文件中，我需要确保 bootstrap 和 bootswatch 的版本都是 3.3.7。然后在 webpacks 配置文件的 non-shakable tree 值中，我只需要引用 bootwswatch/{theme that I want}/bootstrap.css 就不需要从 bootswatch 站点下载主题。

Bootstrap angular5/MVC 中的布局更改

Bootstrap layout change in angular5/MVC

c#

bootswatch

bootstrap-4

asp.net-core-2.0

angular5