ASP.NET MVC - Bootstrap 类引用后未加载

Question

我创建了一个示例 MVC 5 项目用于练习目的，并从博客中用 Bootstrap 类复制了一些 HTML 代码，但我看到了 bootstrap 类没有按预期应用。

我在浏览器控制台中也没有看到任何错误，但类仍然没有得到相应的应用。

布局文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
   
</head>
<body>

    <div class="container body-content">
        @RenderBody()

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

</body>
</html>

查看

       <form class="form-horizontal">
       <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Create Employee</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="fullName">Full Name</label>
                <div class="col-sm-8">
                    <input id="fullName" type="text" class="form-control">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="email">Email</label>
                <div class="col-sm-8">
                    <input id="email" type="text" class="form-control">
                </div>
            </div>

        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
    </div>
</form>

捆绑包配置

 public class BundleConfig
        {
            // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
            }
        }

Answer 1

我认为 bootstrap CSS 和 JS 脚本在您的源文件中没有很好地定位，请检查此 post

波浪号的使用

use of tilde (~) in asp.net path

ASP.NET MVC - Bootstrap 类引用后未加载

ASP.NET MVC - Bootstrap classes not loading after referencing

twitter-bootstrap

asp.net-mvc-5

ASP.NET MVC - Bootstrap 类 引用后未加载

ASP.NET MVC - Bootstrap classes not loading after referencing

twitter-bootstrap

asp.net-mvc-5

ASP.NET MVC - Bootstrap 类引用后未加载