在LESS导入中如何在选择器内使用Bootstrap媒体查询？

Question

我正在尝试将Bootstrap应用于特定的div。为此，我按照以下方式导入Bootstrap LESS文件：

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

然而，这样做似乎会破坏媒体查询。

有没有一种方法可以有选择地应用 Boostrap 样式而不破坏 Boostrap CSS 中的媒体查询？

- bfromsd

---

我建议只导入你需要的 less 文件（例如 modals.less、alerts.less 等），而不是整个库。如果你不想受到媒体查询的影响，可以删除 responsive.less，因为这是它的主要功能。 - DigTheDoug

这似乎是针对特定情况的最佳选择。我也在想，这是否是一个更普遍的解决方案——例如，在不影响媒体查询的情况下包装较少的导入。有什么想法吗？ - bfromsd

为什么你需要这样做？ - Scott Simpson

慢慢将Bootstrap集成到现有网站中。第一轮不想将其应用于所有内容。 - bfromsd

@bfromsd 如果您只将框架应用于网站的部分，则不需要响应性，因为响应性基于全屏宽度和页面所有元素的交互，对吗？ - Sherbrow

Answer 1

我不清楚你是在编译还是使用 less.js。

我能够无误地编译它（使用 Codekit），结果看起来很好，只需确保路径正确即可。

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

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

}

将其放置在其他引导程序 less 文件所在的同一目录中，然后编译它，这是结果：
bootstrap_wrap.css

对我来说，结果看起来很有前途，例如我看到：

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

祝你好运！

- David Taiaroa