【问题标题】:Override CSS media queries覆盖 CSS 媒体查询
【发布时间】:2012-07-10 15:11:21
【问题描述】:

我每天都在处理一个使用我不喜欢的 CSS 媒体查询的页面;我宁愿使用整页(其中大多数与 Twitter Bootstrap 菜单在窄于 768 像素时折叠有关)。

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

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

【问题讨论】:

    标签: css twitter-bootstrap media-queries


    【解决方案1】:

    您为什么不首先删除它们?

    如果不能,您仍然可以使用规则覆盖 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 的原因有 3 个。

    【讨论】:

    • 我同意,如果您不喜欢/不需要它们,为什么不完全删除 bootstrap-responsive.css 文件?
    • 我无法控制源代码。
    【解决方案2】:

    也想覆盖 bootstraps responsive.css。

    我有一半的网站要使用默认的 responsive.css,而另一半的媒体查询会导致布局错误,因此我想将其删除。

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

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

    【讨论】:

    • CSS 不允许在编写后删除任何内容。您只能覆盖一条指令(使用新值,特别是此属性的默认值)。如果该指令位于媒体查询中的规则中,您可以通过为该 MQ、相同的选择器、相同的属性和新的/默认值(并放置它在被覆盖的指令之后)
    猜你喜欢
    • 2013-08-26
    • 2016-02-25
    • 1970-01-01
    • 2014-06-02
    • 1970-01-01
    • 2023-01-26
    • 2016-02-10
    • 2021-11-10
    • 1970-01-01
    相关资源
    最近更新 更多