我正在使用 Angular UI Bootstrap,但我遇到了 Accordion 的问题。在开发环境中,使用完整版的 bootstrap cerulean 文件,它可以正常显示并正常工作。当我最小化 css 文件以将其传递给生产时,问题就来了。在这里, Accordion 失去了边界,它仍然工作正常,但它与开发中的情况不同。
我在开发人员控制台中检查了两者的 css 属性,它们是相同的,但由于某种原因,边框颜色在文件的缩小版本上不起作用。这是两者的代码:
发展:
.panel-default {
border-color: #dddddd;
}
生产:
.panel-danger,.panel-danger>
.panel-heading, .panel-default, .panel-default>
.panel-heading, .panel-info>
.panel-heading, .panel-primary, .panel-primary>
.panel-heading, .panel-success, .panel-success>
.panel-heading, .panel-warning, .panel-warning>
.panel-heading, .well blockquote {
border-color: #ddd;
}
我使用 Grunt 来最小化 CSS 文件。
此处应应用的 HTML 代码:
<accordion-min heading="Buscar por" class="ng-isolate-scope">
<div class="col-lg-12 hidden-print" ng-init="estado = true">
<accordion>
<div class="panel-group" ng-transclude="">
<div class="panel panel-default ng-isolate-scope" is-open="estado">...</div>
</div>
</accordion>
</div>
</accordion-min>
如果我的英语不是很好,我很抱歉,因为它不是我的母语。
我希望你能在这里给我一些提示,看看我遗漏了什么。 提前致谢。
最佳答案
好吧,我继续这个,我意识到,为了不让 .panel-default 类的 border-color 属性被覆盖,我可以使用“!important”标签。所以我将它添加到常规文件中:
.panel-default {
border-color: #dddddd !important;
}
Grunt 正确地缩小了它,现在 Accordion 元素的边框恢复正常了。
至少,这比我想象的要容易。
关于html - Bootstrap 面板边框显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29684933/