Bootstrap Mixins - 不能使用 .panel-heading答案

【问题标题】：Bootstrap Mixins - Can't use .panel-headingBootstrap Mixins - 不能使用 .panel-heading
【发布时间】：2014-01-14 10:31:24
【问题描述】：

我正在尝试使用 .panel-heading 作为我正在使用 Bootstrap 框架编写的一些自定义 LESS 中的混合。

然而，并不是所有的 CSS 都是使用 mixin 引入的。

在引导文件中，.panel-heading 有以下定义：

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
  border-color: @border;
  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;
    + .panel-collapse .panel-body {
      border-top-color: @border;
    }
  }
  & > .panel-footer {
    + .panel-collapse .panel-body {
      border-bottom-color: @border;
    }
  }
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  .border-top-radius(@panel-border-radius - 1);
}

当我执行以下操作时：

.panel {
    .panel-default;

    header {
        .panel-heading;
    }
}

只有color、background-color 和border-color 被拉出。有什么想法吗？

此处为 HTML：

<div class="panel">
    <header><h4><a>Header</a></h4></header>
    <div class="collapse in">
        <div>

        </div>
    </div>
</div>

【问题讨论】：

我无法重现这个 - 鉴于您上面的代码，应该正确应用 mixin。还有其他代码没有显示吗？
是的，但我认为这没有什么重要的，你测试的是什么版本的引导程序，我在 3.0.0 上，这可能是问题吗？
最新的 3.0.3 - 不过应该没有区别。
刚刚更新，还在做同样的事情。将尝试创建一个 JSFiddle 看看我是否可以复制它。
奇怪，如果我将header 移出.panel，它会起作用。但是 header 标记在带有类面板的 div 内，所以我不明白为什么它不起作用。

标签： css twitter-bootstrap less twitter-bootstrap-3

【解决方案1】：

.panel {
     &:extend(.panel-default all);

    header {
        &:extend(.panel-heading all);
    }
}

另请参阅：Less inherit "virtual" class

【讨论】：