ASP.NET-MVC5-为什么Bootstrap v4主题无法正确显示组件? [英] ASP.NET-MVC5 - Why would Bootstrap v4 themes not show components correctly?

问题描述

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

I have a brand new ASP.Net MVC5 application. I wanted to change the default theme to Minty theme which is for Bootstrap Version 4. However, after following the below steps the theme has messed up and not showing components correctly such as Nav bar. Can anyone guide me how to install the latest themes from Bootswatch.

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

Since It was a brand new ASP.Net MVC application. I did the following:

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. Installed Bootstrap: Install-Package bootstrap - Version 4.0.0
2. Installed jQuery: Install-Package jQuery -Version 3.2.1
3. Installed Popper.js: Install-Package popper.js -Version 1.12.9

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

After installing the above. I did the following steps to try to change the default theme:

1. 选择 Minty 主题，然后下载并复制bootstrap.css样式
2. 称为文件minty.bootstrap.css
3. 将minty.bootstrap.css添加到 Content 文件夹
4. 更新了捆绑包，将其定位为文件夹 App_Start -> BundleConfig.cs
中的新Minty主题.

1. Selected the Minty theme and downloaded and Copied the bootstrap.css styles
2. Called the file minty.bootstrap.css
3. Added the minty.bootstrap.css to Content folder
4. Updated the bundle to target the new Minty theme in the folder App_Start -> BundleConfig.cs

BundleConfig.cs文件:

The BundleConfig.cs file:

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文件:

_Layout.cshtml file:

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

然后构建了项目以检查更改，但导航栏与预期不符:

Then built the project to check the changes but the navigation bar was not as expected:

谢谢

推荐答案

是的，您必须在布局页面中删除导航div并将其放置

yes you have to remove the nav div in layout page and put this

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

这篇关于ASP.NET-MVC5-为什么Bootstrap v4主题无法正确显示组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！