css - Bootstrap Mixins - 不能使用 .panel-heading

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

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

然而,并不是所有的 CSS 都被 mixin 引入。

在 Bootstrap 文件中,.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;
    }
}

只有colorbackground-colorborder-color 被拉过。知道发生了什么事吗?

此处为 HTML:

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

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

最佳答案

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

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

另请参阅:Less inherit "virtual" class

关于css - Bootstrap Mixins - 不能使用 .panel-heading,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20790407/

相关文章:

css - 如何解决这个 sass 插值问题

css - div边框定位

jquery - 在页面调整大小的同一列中 Bootstrap 重新排序元素?

javascript - 我怎样才能阻止这个 jQuery 出问题?

html - Bootstrap 3,视网膜显示器和 col-lg

html - 使用 css 在不同的屏幕尺寸上分配不同的类

CSS 规则在某些浏览器上生成 404 错误

css - 无法居中我的主导航。永远留在左边。 (CSS)

css - 较少循环遍历数组会不断附加先前的值

css - 相对选择器的 Less & analog