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

Question

我有一个全新的ASP.Net MVC5应用程序.我想将默认主题更改为Minty主题Bootstrap Version 4.但是,按照以下步骤操作后,主题变得混乱,并且没有正确显示组件,例如导航栏.任何人都可以指导我如何安装Bootswatch的最新主题.

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

1. 已安装的Bootstrap:Install-Package bootstrap - Version 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到" 内容"文件夹
4. 更新了捆绑包以定位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>