引导面板边框未正确显示

Posted

技术标签:

【中文标题】引导面板边框未正确显示【英文标题】:Bootstrap panel border not showing properly 【发布时间】:2015-06-23 11:06:06 【问题描述】:

我正在使用 Angular UI Bootstrap,但我遇到了手风琴问题。在开发环境中,使用完整版的 bootstrap cerulean 文件,它应该可以正常显示和工作。当我最小化 css 文件以将其传递给生产时,问题就来了。在这里,手风琴失去了边界,它仍然可以正常工作,但与开发中的不同。

我在开发人员控制台中检查了两者的 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>

如果我的英语不太好,我很抱歉,因为这不是我的母语。

我希望你能在这里给我一些提示,看看我缺少什么。 提前致谢。

【问题讨论】:

您是否检查过该样式是否被生产中的其他样式覆盖? 当 grunt 缩小你的 css 时,它的组合方式可能不太理想。我记得最近遇到过这样的问题——您可能需要构建索引文件,以便您编写的 css 与 grunt 自动编译 css 的区域不同。 【参考方案1】:

好吧,我继续这样做,我意识到,为了不让 .panel-default 类的边框颜色属性被覆盖,我可以使用“!important”标签。所以我将它添加到常规文件中:

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

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

至少,这比我想象的要容易。

【讨论】:

以上是关于引导面板边框未正确显示的主要内容,如果未能解决你的问题,请参考以下文章

引导按钮未正确显示

导航栏中的引导下拉菜单未正确显示

引导列在 Firefox 中未正确显示

引导导航选项卡未加载正确的页面

引导缩略图未正确对齐

无法在反应 js 中显示引导面板