【问题标题】:ASP.NET MVC - Bootstrap classes not loading after referencingASP.NET MVC - 引用后引导类未加载
【发布时间】:2020-07-13 23:59:51
【问题描述】:

我为练习目的创建了一个示例 MVC 5 项目,并从博客中复制了一些带有 Bootstrap 类的 HTML 代码,但我发现引导类没有按预期应用。

我在浏览器控制台中也没有看到任何错误,但仍然没有相应地应用这些类。

布局文件

<!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"));
            }
        }

【问题讨论】:

    标签: twitter-bootstrap asp.net-mvc-5


    【解决方案1】:

    我认为引导 CSS 和 JS 脚本在您的源文件中没有很好地定位,请检查这篇文章中波浪号的使用

    use of tilde (~) in asp.net path

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-02-10
      • 2022-10-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多