Question

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

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

已安装 Bootstrap ：Install-Package bootstrap - Version 4.0.0
已安装 jQuery ：Install-Package jQuery -Version 3.2.1
已安装 Popper.js ：Install-Package popper.js -Version 1.12.9

安装完上面的内容。我执行了以下步骤来尝试更改默认主题：

选择Minty主题，然后下载并复制bootstrap.css个样式
调用文件minty.bootstrap.css
将minty.bootstrap.css添加到内容文件夹
更新了捆绑包，以定位 App_Start - ＆gt;文件夹中的新Minty主题。的 BundleConfig.cs

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

是的，您必须删除布局页面中的nav 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>

Answer 2

供将来参考，我在导航栏中遇到了类似的问题，不得不更改布局页面以匹配下面的Bootstrap 4.0文档链接提供的信息：

https://getbootstrap.com/docs/4.0/components/navbar/

编辑：此外，我必须将我的所有@ Html.ActionLink替换为<a class="nav-link" href="@Url.Action("Index", "Views")">Navbar Item</a>，以使其像升级我的Bootstrap之前的工作方式一样

Answer 3

导航栏问题是由于Bootswatch（https://bootswatch.com/）现在已更新为版本4，而MVC仍使用Bootstrap版本3。因此，您需要访问以下网站：{{3 }}，然后重做您执行的步骤。

对我有用〜

Answer 4

导航栏问题是，默认情况下，MVC仍使用Bootstrap版本3，当您将nuget软件包升级到Bootstrap版本4时，代码将被重写并更改为其他类。
这里有一些解释：Navbar - Migrating to V4 * Bootstrap

导航栏已完全在flexbox中重写，并改进了对对齐，响应和自定义的支持。响应式导航栏行为现在通过所需的.navbar-expand- {breakpoint}应用于.navbar类，您可以在其中选择折叠导航栏的位置。以前，这是较少变量的修改，需要重新编译。 .navbar-default现在是.navbar-light，尽管.navbar-dark保持不变。

我修改了默认模板 _Layout.cshtml ，以与Bootstrap v4中的Navbar一起使用。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <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 mr-auto">
            <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link active" })</li>
            <li class="nav-item">@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</li>
            <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</li>
        </ul>
    </div>
</nav>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

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

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

4 个答案: