与 Twitter Bootstrap Bundle 的 ASP.NET MVC4

发布于09月26日

我试图在Twitter bootstrap 的MVC4中使用新的Bundle 特性，在我看来，CSS get中的字形图标png-files的路径在某种程度上搞砸了.以下是我的代码:

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

我没有在按钮上看到任何图标，同样的.我做错什么了吗？有什么建议吗？

推荐答案

问题很可能是css文件中的图标/图像使用的是相对路径，因此，如果你的Bundle 包与未绑定的css文件不在同一应用程序相对路径中，它们就会变成断开的链接.

我们的待办事项列表中有css中的URL重定基址，但目前最简单的做法是让包路径看起来像css目录，这样相对URL就可以正常工作，即:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Update:我们在1.1beta1版本中增加了对这一点的支持，所以要自动重写图像URL，可以添加一个新的ItemTransform，它会自动重新设置基址.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));