覆盖CSS媒体查询

时间:2012-07-11 03:47:09

标签: css twitter-bootstrap media-queries

我每天使用一个使用我不喜欢的CSS媒体查询的页面;我宁愿使用完整的页面(大多数都与Twitter引导程序菜单相关,当它比768px窄时)。

有没有办法用CSS覆盖Bootstrap的媒体查询?最好不要定义我自己的媒体查询来单独覆盖所有规则,因为我觉得这需要很长时间。

编辑:我无法控制源代码,否则我只会删除引导响应代码。

2 个答案:

答案 0 :(得分:11)

为什么不首先删除它们?

如果不能,您仍然可以使用规则覆盖CSS声明:

  • 具有相同的选择器优先级,并在 MQ块
  • 之后
  • 具有更高的选择器优先级,而不是MQ块
  • 中的规则
  • 在值和分号之间 !important
    /* one id, one class AND one element => higher priority */
    #id element.class { property: value2; }

    /* !important will nuke priorities. Same side effects as a nuke,
       don't do that at home except if you've tried other methods */
    #id .class { property: value2 !important; }

    @media(blah) {
      /* Overridden. Thrice. */
      #id .class { property: value1; }
    }

    /* same selector, same everything except it comes after the one in @media?
       Then the latter is applied.
       Being in a @media doesn't give any more priority (but it won't be applied
       everywhere, depending on "blah", that's the point of MQ) */
    #id .class { property: value2; }

在前面的示例中,@media块之外的任何声明都将覆盖内部的声明,例如为什么会应用value2而不是value1有三个原因。

答案 1 :(得分:2)

也想覆盖bootstraps responsive.css。

我有一半的网站我想使用默认的responsive.css,而另一半的媒体查询导致错误的布局,所以我想删除它。

根据我的研究 css不允许删除媒体查询

所以我将去复制responsive.css并删除媒体查询。如果您无权访问源,则可能是唯一的选择。