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

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 将层叠或覆盖您的规则。