媒体查询不起作用，直到我输入！重要

Question

我的网站使用 bootstrap 4 和我制作的 css 文件。

在这个 css 文件的底部，我放置了一些媒体查询：

@media (max-width: 575px) {
  .address .contact {
    text-align: center;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

@media screen and (min-width:768px) and (max-width:992px){
  .left{
    margin-left: 0;
    width: 100%;
  }

  .picto{
    width: 40%;
  }

}

这是代码的一部分：

<section id="section_address" class="container">
        <div class="row">
            <div class="col-12 col-sm-6">
                <div class="address">
                    <h5>ADDRESS</h5>
                    1 street,<br>
                    75000, PARIS
                </div>
            </div>
            <div class="col-12 col-sm-6">
                <div class="contact">
                    <h5>MYCOMPANY</h5>
                    01 11 22 33 44<br>
                    contact@mycompany.com<br>
                    <a href="http://mycompany.com" target="_blank">http://mycompany.com</a>
                </div>
            </div>
        </div>
    </section>

但是我的媒体查询不起作用，除非我在每一行中添加 !important。但是我不能对每一行都这样做，而且我已经使用了媒体查询而且我从来没有这样做过。

Answer 1

Bootstrap css 文件应该在 html 页面中的自定义 css 文件之前被引用。如果不是 bootstrap css 将级联或覆盖您的规则。

Answer 2

首先，避免使用 !important 除非绝对必要，否则会造成维护风险。

相反，看看如何使您的规则比 bootstrap 规则更具体。检查 DOM 并查看有问题的规则，然后参考 specificity rules 更新您的 select or，以便它们优先。

关于您新增的代码：

@media (max-width: 575px) {
  .address .contact {
    text-align: center;
  }
}

此 select 用于所有 .contact class 元素作为“.address”元素的后代。粘贴的代码中不存在此层次结构。

如果你想select他们两个，那么你需要一个逗号：

@media (max-width: 575px) {
    .address, .contact {
        text-align: center;
     }
}

如果这不够具体，那么这几乎可以肯定是：

@media (max-width: 575px) {
    #section_address .address, #section_address .contact {
        text-align: center;
     }
}

除此之外，我在任何地方都看不到 .left 或 .picto。

Answer 3

确保您的自定义 CSS 添加在所有其他 CSS 之后。因为您的自定义 CSS 应该添加在所有其他 CSS 文件之后。您的自定义 CSS 将覆盖其他 CSS.

因为 CSS 适用 "top to bottom".

谢谢！！！

Answer 4

很可能，您应用了自己的 CSS classes 的元素也应用了 Bootstrap classes（例如 .row 、column、col-12 和许多其他规则）和 Bootstrap CSS 规则（尤其是那些组合了多个 class 的规则）具有更高的 specifity，它推翻了你自己的 classes.

要获得您想要的结果，请在这些元素上使用浏览器工具/检查器，然后查看应用了哪些 CSS class / CSS 规则/选择器。然后创建一个规则，它使用相同的选择器（classes 的组合）加上你自己的 class，这将导致更高的特异性，因此推翻原来的 Bootstrap 规则。

媒体查询不起作用，直到我输入！重要

Media queries not working 'till i put !important

css

media-queries

bootstrap-4