html - 尝试使用 Bootstrap 应用 @media 查询时出现问题

Question

我正在尝试应用一个 @media 查询，因此当最大宽度达到 991px 时，将添加一个 padding-left类，但是当 max-width 达到 991px 并且页面的主体开始在 aside 下换行时，什么也没有发生，我使用 Bootstrap ，这里是代码的一部分:

CSS

@media(max-width : 991px) {
    .mainIcon {
        padding-left: 47px;
    }
}

HTML

<section class="mainin">
      <div class="container-fixed mainIcon">
        <div class="row mainFoto">
          <div class="col-md-4">
            <img src="images/code_big.png" alt="">
            <a class="boutonCode">Code</a>
          </div>
          <div class="col-md-4">
            <img src="images/tutoriel_big.png" alt="">
            <a class="boutonTutoriel">Tutoriels</a>
          </div>
          <div class="col-md-4">
            <img src="images/foucha_big.png" alt="">
            <a class="boutonfoucha">PROJECTS</a>
          </div>
        </div>
        <header class="globalTitle">
        <a href="" class="atitle"><h1 class="title">Turn Your Brean <span>On</span></h1></a>
        <h2 class="subtitle">design the future</h2>
        </header>
      </div>

    </section> 

LIVE DEMO

当我检查页面并尝试在他小于 991px 时减小浏览器的宽度时，我发现未应用 padding-left，我不知道如何修复这个!

Answer 1

问题似乎是您在页面顶部调用媒体查询，但在其下方调用 .mainIcon 的常规样式。这导致媒体查询被正常样式覆盖，这将解释调整后的 padding-left 在您期望该元素时被划掉。一个好的经验法则是始终将您的媒体查询包含在其他 CSS 下方(或至少在您要更改的 class/id/等下方)。

尝试:

.mainIcon {
  width: 99%;
  padding-top: 14%;
  padding-left: 20%;
}

@media (max-width: 991px) {
  .mainIcon {
    padding-left: 47px;
  }
}