Question

我目前正致力于portlet开发，我需要这些portlet才能做出响应。我正在使用Twitter Boostrap 3.这并不容易，因为medias查询是基于窗口宽度而不是基于«容器»宽度...

我一直在寻找“元素查询”（http://www.xanthir.com/b4PR0）等解决方案，但不幸的是它还不存在。

所以我决定创建一个自定义版本的bootstrap，它将满足我的需求，并为我的portlet提供更多的模块化，以便它们更加流畅。这是一个live demo，它只是一个概念证明（它仍然没有什么错误，但这些错误主要是在新版本上修复的）。

基本上一个小的javascript片段测试portlet容器宽度并根据twitter引导状态（xs为768px下的屏幕，md为768px和992px之间的屏幕等应用CSS类等...）在CSS中，我删除了所有媒体查询，并将其替换为与“州”相对应的CSS类，例如：

@media screen and (max-width : 768px) {
    .module {
        color : red ;
    }
}

将转变为

.portlet-container.xs .module {
    color : red ;
}

在我的上下文中，«portal»需要导入twitter引导程序库（它不会总是正确但有时可能在某些用例中）但它可能会导致自定义版本出现问题（我已经修复了这个问题） javascript导入问题...）例如：

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

如果屏幕超过768px，将应用

，但它将应用于portlet导航栏，即使它低于768px，因为没有任何覆盖它。

所以我正在寻找一个不将原始CSS规则应用于特定容器的解决方案......我尝试过很多:not()的事情，例如：

@media (min-width: 768px) {
  :not(.portlet-container) .navbar-toggle {
    display: none;
  }
}

哪个不起作用（我明白为什么它不起作用，但我看不到任何解决方案）

我在jQuery中看到了诸如.filter(':not(:has(.portlet-container))') ;之类的内容，但我不知道如何将它应用到我的案例中。

我尽量保持清醒，但如果你不明白，可以随意提问。

PS：我正在使用CSSOM.js（CSS对象模型）来自动化自定义过程