我有一个ASP.NT MVC(4)应用程序。我集成了(twitter)Bootstrap。
Bootstrap工作正常,但是当我发布应用程序时,图标无法正确显示。
我试图重新发布应用程序但没有成功。
为了澄清我在下面放了一些图片。
当我从VS2013运行我的应用程序时,结果就是这样(这没关系):
在展台,IE和Chrome。
但是当我运行已发布的应用程序时,结果是这样的(这不是正常的):
> Chrome
> IE(10)
不知何故,这个问题与评估的CSS有关,但我不知道这可能发生在哪一点。
本地应用程序中评估的css是这样的(可以):
> Chrome
> IE
但在已发布的应用程序中,我有这个(这不是正常的):
> Chrome:
> IE:
有些人经历过这种行为吗?
我能做些什么来解决这个奇怪的问题?
————————— EDITED ———————- ——–
我发布我的应用程序时要包含的字体文件(.eot,.svg,.ttf和.woff)。
当我访问默认页面(应用程序根http:// localhost /)时,显示图标的页面显示Chrome的“开发人员工具网络”选项卡中显示的文件是:
在包含文件之前,我收到文件的404错误,所以我猜他们会继续被请求,即使它们没有显示在网络选项卡中。
但是,图标显示不正确。
———————— EDITED 2 ———————— —
好吧,我在IIS 7中重启了我的网站。请求开始被触发。这些是Chrome开发者工具网络标签中显示的文件请求:
然后resquest正在寻找:/ Content / themes / fonts /中的文件,但它们位于:/ Content / themes / base / fonts /
基本文件夹包含一个引导文件夹,其中包含bootstrap.css文件。在CSS文件中有这个类参考字体文件:
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }
我可以将课程更改为:
@font-face { font-family: 'Glyphicons Halflings'; src: url('../base/fonts/glyphicons-halflings-regular.eot'); src: url('../base/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../base/fonts/glyphicons-halflings-regular.woff') format('woff'),url('../base/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../base/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }
但是,我实际上会知道这是怎么回事以及如何解决它!
此外,图标将显示在已发布的站点中,但不会显示在本地站点中(从带有iisexpress的VS2013运行)。
预先感谢您的帮助!
解决方法
在BundleConfig.cs文件中,使用CssRewriteUrlTransform创建包:
bundles.Add(new StyleBundle("~/Content/css/bootstrap").Include("~/Content/bootstrap.min.css",new CssRewriteUrlTransform()));
包含在_Layout.cshtml中:
@Styles.Render("~/Content/css/bootstrap")