使用带有特定元素的 Bootstrap 时出现问题答案

【问题标题】：Issue using Bootstrap with a certain element使用带有特定元素的 Bootstrap 时出现问题
【发布时间】：2015-10-06 17:01:17
【问题描述】：

我正在尝试使用 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 的显示方式。欢迎提出任何建议。

【问题讨论】：

是的，您的课程只会影响图像的响应能力。不是轮播的显示方式。
谢谢。我怎样才能恢复响应能力？我应该为此包含另一个 Less 文件吗？为什么轮播样式被剥离？
@Alejalapeno 如果我这样做，scaffolding.less 中提到的样式会与页面中已经存在的其他样式混淆。我想要的主要 css 在scaffolding.less 中。包装它也会剥离一些样式。
@Alejalapeno 没有变化。
因为它们是单独导入的，所以它会将.my 应用到.img-responsive THEN 当 carousel.less 尝试扩展 .img-responsive 时它不能，因为它现在是 .my .img-responsive

标签： html css twitter-bootstrap less

【解决方案1】：

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

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

【讨论】：

不知道那个 :extend 语句。如果我将其更改为:extend(.my .img.responsive)，似乎可以工作。一种糟糕的解决方法，但有效。那谢谢啦：）。令人震惊的是，它的硬编码是这样的......
太棒了。这样做你应该让你的类成为一个变量，这样你就可以在不更新每个实例的情况下改变它。我更新了一个例子。
当然。感谢您的提示。