Question

我正在尝试使用LESS并将Bootstrap样式仅约束到页面上的某个元素，以便其他元素不会受到影响。

我正在我的页面上显示轮播。在类之外导入LESS文件时如下：

@import "..\..\..\content\bootstrap\variables.less";
@import "..\..\..\content\bootstrap\mixins.less";
@import "..\..\..\content\bootstrap\carousel.less";
@import "..\..\..\content\bootstrap\scaffolding.less";

我为特定的课程获得了如下的CSS。

.img-responsive,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

当我在元素类中使用它时，如：

.my{
@import "..\..\..\content\bootstrap\variables.less";
@import "..\..\..\content\bootstrap\mixins.less";
@import "..\..\..\content\bootstrap\carousel.less";
@import "..\..\..\content\bootstrap\scaffolding.less";
@import "..\..\..\content\bootstrap\grid.less";
}

我得到了类似下面的CSS：

.my .img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

删除.carousel-inner > .item > img, .carousel-inner > .item > a > img个样式。我在这里错过了什么或者这是设计的吗？我不希望我的其他元素受到Boostrap样式的影响。这也影响了我的Carousel的显示方式。欢迎任何建议。

Answer 1

好的，那么只需采用超简单的解决方法，并将carousel.less &:extend(.img-responsive);中的第23行替换为&:extend(.@{my-class}.img-responsive);，并将您的类定义为变量，以便以后更容易更改。

@my-class: my;
.@{my-class} {
  /* your code */
}

使用Bootstrap与特定元素的问题

1 个答案: