时间戳

首页 > 解决方案 > CSS 没有覆盖 @media Query 中的 Bootstrap Margin 标签

html - CSS 没有覆盖 @media Query 中的 Bootstrap Margin 标签

问题描述

在我的@media 查询中，我试图更改mt-5分配给h1我的 HTML 中的标题标签的边距 top()。其他条件有效，但不是保证金。我的 css 表链接在引导程序下方。

我尝试向 h1 添加一个类，也针对h1该 id 中的所有 s。

代码笔链接

HTML

<h1 class="mt-5 wcu-title">
    Why Choose Your Computer Assistant Ltd?
</h1>

媒体查询

  #showcase-wcu h1 
  {
    margin-top: 10px;
    font-size: 30px;
    width: 60%;
  }

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

我建议您删除或替换 mt-5 类。mt-5 类定义为margin-top:3rem!important. 它的默认定义包括这一事实!important意味着即使您在使用 的媒体查询中将其重新定义为 10px !important，这也不会成功，因为媒体查询将被第二次读取。

使用与 mt-5 类不同的类似乎是最佳选择。您也可以创建一个包含 mt/wcu 标题属性的唯一 id，并在您的媒体 css 中重新定义它。

推荐阅读