我的网站使用 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
。但我不能对每一行都这样做,而且我已经使用了媒体查询,而且我从来没有这样做过。
最佳答案
Bootstrap css 文件应该在您的 html 页面中的自定义 css 文件之前被引用。如果不是,bootstrap css 将层叠或覆盖您的规则。
关于css - 媒体查询不起作用,直到我输入!重要,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57760163/