在 LESS 导入中的选择器中引导媒体查询

Question

我正在尝试将Bootstrap应用于特定的div。为此，我导入了Boostrap LESS文件，如下所示：

.bootstrap_wrap {
    @import 'bootstrap/bootstrap.less'; 
    @import 'bootstrap/responsive.less';    
}

但是，这样做似乎会中断媒体查询。

有没有办法有选择地应用 Boostrap，而不会破坏 Boostrap CSS 中的媒体查询？

Answer 1

我不清楚您是在编译这个还是使用更少.js

我能够编译它而不会出错（使用 Codekit），结果看起来不错，只要确保路径正确即可。

如果我创建一个新的 bootstrap_wrap.less 文件

.bootstrap_wrap {
@import 'bootstrap.less';
@import 'responsive.less';  

}

并将其放在与其他 bootstrap less 文件相同的目录中，然后编译它，结果如下：
bootstrap_wrap.css

结果对我来说很有希望，例如我看到：

@media (max-width: 767px) {
.bootstrap_wrap #footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}

祝你好运！