ASP.NET MVC4 与 Twitter Bootstrap 捆绑

Question

我正在尝试将 MVC 4 中的新捆绑功能与 Twitter bootstrap 一起使用，在我看来，css 中的字形 png 文件的路径在某种程度上被搞乱了。这是我的代码:

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

我没有在按钮上看到任何图标等。我在这里做错了什么吗？有什么建议吗？

Answer 1

问题很可能是 css 文件中的图标/图像使用相对路径，因此如果您的 bundle 与未捆绑的 css 文件不在同一应用程序相对路径中，它们就会成为损坏的链接。

我们在待办事项列表中的 css 中重新设置了 url，但目前最简单的做法是让您的包路径看起来像 css 目录，这样相对 url 就可以工作，即:

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

更新:我们在 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()));