Bootstrap less - 覆盖整个类 [英] Bootstrap less - override entire class

问题描述

我使用Bootstrap较少的文件。我宁愿不直接修改它们，因为这似乎是不好的做法。 我编辑的唯一文件是 bootstrap.less ，因为我需要添加覆盖类。

I am using the Bootstrap less files. I would rather not modify them directly, since this seems to be bad practice. The only file I am editing is bootstrap.less since I need to add in override classes.

type.less 我要修改：

.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  border-bottom: 1px solid @page-header-border-color;
}

因此我创建了一个新的 _type.less 包含此：

.page-header {
  background: blue;
}

这是在 bootstrap.less 文件：

@import "type.less";
@import "../bootstrap-custom/_type.less";

我的问题是编译器输出这两个类到 bootstrap.css

The problem I have is that the compiler outputs both classes to bootstrap.css - I want to override the original so that it only uses my implementation instead.

这是否可能？

推荐答案

不要在主bootstrap.less中调用less，在你的less文件的顶部调用bootstrap.less。

Don't call your less in the main bootstrap.less, call the bootstrap.less at the top of your less file.

此外，您还需要覆盖.page-header中的每一个定义。

Also you will need to overwrite every single definition in .page-header

.page-header {
     padding-bottom: 0;
     margin: 0;
     border-bottom: none;
     background: blue;
   } 

这篇关于Bootstrap less - 覆盖整个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！