Question

我正在使用Angular UI Bootstrap，我遇到了手风琴的问题。在开发环境中，使用bootstrap cerulean文件的完整版本，它显示并正常工作。当我最小化css文件，将其传递给生产时，问题出现了。在这里，手风琴失去了他的边界，它仍然工作正常，但它不像开发中那样看到。

我在开发人员控制台中检查了两者的css属性并且它们是相同的，但由于某种原因，border-color对文件的缩小版本不起作用。以下是两者的代码：

发展：

.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>

如果我的英语不太好，我很抱歉，因为它不是我的出生语言。

我希望你能在这里给我一些提示，看看我错过了什么。提前谢谢。

Answer 1

好吧，我继续这个，我意识到，为了不让类.panel-default的border-color属性被覆盖，我可以使用“！important”标签。所以我把它添加到常规文件中：

.panel-default { 
    border-color: #dddddd !important;
}

Grunt正确缩小它，现在手风琴元素的边框恢复正常。

至少，它比我更容易。

Bootstrap面板边框未正确显示

1 个答案: