jquery - ASP.NET-MVC5 - 为什么 Bootstrap v4 主题不能正确显示组件？

Question

我有一个全新的 ASP.Net MVC5 应用程序。我想将默认主题更改为 Minty Bootstrap Version 4 的主题。但是，在执行以下步骤后，主题出现困惑，无法正确显示导航栏等组件。 任何人都可以指导我如何安装来自 Bootswatch 的最新主题吗？ .

因为它是一个全新的 ASP.Net MVC 应用程序。我做了以下事情:

1. 已安装 Bootstrap:Install-Package bootstrap -
版本 4.0.0
2. 已安装 jQuery:Install-Package jQuery -Version 3.2.1
3. 已安装 Popper.js:Install-Package popper.js -Version 1.12.9

安装完以上。我执行了以下步骤来尝试更改默认主题:

1. 选择了 Minty主题并下载并复制了 bootstrap.css 样式
2. 调用文件 minty.bootstrap.css
3. 将 minty.bootstrap.css 添加到 Content 文件夹
4. 更新了 bundle 以针对文件夹 App_Start -> BundleConfig.cs
中的新 Minty 主题

BundleConfig.cs 文件:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
       "~/Scripts/bootstrap.js",
       "~/Scripts/respond.js"));

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

_Layout.cshtml 文件:

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

然后构建元素以检查更改但导航栏不是预期的:

谢谢

Answer 1

是的，你必须删除布局页面中的导航 div 并放置它

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