在 LESS 导入中的选择器内引导媒体查询？答案

【问题标题】：Bootstrap Media Queries Inside a Selector in a LESS Import?在 LESS 导入中的选择器内引导媒体查询？
【发布时间】：2012-12-03 01:18:27
【问题描述】：

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

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

但是，这样做似乎会破坏媒体查询。

有没有什么方法可以选择性地应用 Boostrap 而不会破坏 Boostrap CSS 中的媒体查询？

【问题讨论】：

我会考虑只导入您需要的较少文件（modals.less、alerts.less 等等），而不是整个库。如果您不希望媒体查询受到特别影响，请删除 responsive.less，因为这是它的主要功能。
这似乎是这个特定实例的最佳选择。我也想知道这是否是一个更通用的解决方案——例如一种在不影响媒体查询的情况下包装较少导入的方法。有什么想法吗？
为什么需要这样做？
慢慢地将 Bootstrap 集成到现有站点中。不想在第一轮将其应用于所有内容。
@bfromsd 如果您仅将框架应用于网站的一部分，您将不需要响应性，因为响应性基于全屏宽度和页面所有元素的交互，您会吗？ ?

【解决方案1】：

我不清楚你是编译这个还是使用less.js

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

如果我用

创建一个新的 bootstrap_wrap.less 文件

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

}

并将它与其他引导较少的文件放在同一目录中，然后编译它，结果是：
bootstrap_wrap.css

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

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

祝你好运！

【讨论】：