意外的BundleConfig行为

时间:2017-06-16 16:29:57

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

ASPNET MVC5 Web应用程序

通过实施BundleConfig,我不断获得意想不到的结果。

的Global.asax.cs

protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }

 public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/bundlejquery").Include(
                   "~/Scripts/jquery-1.12.4.min.js",
                   "~/Scripts/jquery-ui-1.12.1.min.js",
                   "~/Scripts/jquery.validate.min.js",
                   "~/Scripts/jquery.validate.unobtrusive.min.js",
                   "~/Scripts/jquery.mobile.custom.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.min.js",
                  "~/Scripts/respond.min.js"));


        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/jquery.mobile.custom.structure.min.css",
                  "~/Content/jquery.mobile.custom.theme.min.css",
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
    }

这是一个包含轮播的视图:我根据使用或不使用BundleConfig获得不同的css输出。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @*@Styles.Render("~/Content/css")*@
    <link rel="stylesheet" href="~/Content/jquery.mobile.custom.structure.min.css" />
    <link rel="stylesheet" href="~/Content/jquery.mobile.custom.theme.min.csss" />
    <link rel="stylesheet" href="~/Content/bootstrap.css" />
    <link rel="stylesheet" href="~/Content/site.css" />

    <link rel="stylesheet" href="~/Content/StepBar.css">

    <link rel="stylesheet" href="~/Scripts/jquery-ui-themes-1.12.1/themes/base/jquery-ui.min.css" />
    @Scripts.Render("~/bundles/bundlejquery")
</head>

输出(正如预期的那样,轮播img是水平居中的)

enter image description here

现在我只是REM前4个链接和Un-REM @ Styles.Render(“〜/ Content / css”)

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @*<link rel="stylesheet" href="~/Content/jquery.mobile.custom.structure.min.css" />
    <link rel="stylesheet" href="~/Content/jquery.mobile.custom.theme.min.csss" />
    <link rel="stylesheet" href="~/Content/bootstrap.css" />
    <link rel="stylesheet" href="~/Content/site.css" />*@

    <link rel="stylesheet" href="~/Content/StepBar.css">

    <link rel="stylesheet" href="~/Scripts/jquery-ui-themes-1.12.1/themes/base/jquery-ui.min.css" />
    @Scripts.Render("~/bundles/bundlejquery")
</head>

我不希望html输出发生变化,因为我只用BundleConfig类中的引用替换了这4个样式表。 然而,输出有些不同:

enter image description here

现在轮播图片左对齐。 这意味着替换不等同于4个原始样式表:它怎么可能?

0 个答案:

没有答案