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

在HTML页面中自定义css文件之前，应先引用Bootstrap css文件。如果没有，bootstrap css将层叠或覆盖您的规则。

Answer 2

首先，除非绝对必要，否则避免使用!important，这是维护的隐患。

相反，请看如何使规则比引导规则更具体。检查DOM并查看有问题的规则，然后参考specificity rules更新选择器，使其优先。

关于您的新添加的代码：

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

这为所有.contact类元素选择作为.address元素的后代。粘贴的代码中没有此层次结构。

如果要同时选择它们，则需要使用逗号：

@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将“从上到下”应用。

谢谢！

Answer 4

最可能的是，您向其应用了自己的CSS类的元素也已对其应用了Bootstrap类（例如.row，column，col-12等）以及Bootstrap CSS规则（尤其是组合了多个类的CSS规则）具有更高的 specifity （特殊性），从而取代了您自己的类。

要获得所需的结果，请对这些元素使用浏览器工具/检查器，并查看应用了哪个CSS类/ CSS规则/选择器。然后创建一个使用相同选择器（类组合）加上您自己的类的规则，这将导致更高的指定范围，因此会否决原始的Bootstrap规则。

媒体查询无效，直到我放了！重要

4 个答案: