尝试通过Bootstrap应用@media查询时出现问题

Question

我正在尝试应用@media查询，因此当最大宽度达到991px时，将向该类添加一个padding-left的padding-left ，但是当max-width达到991px且页面的主内容开始换991px ，没有任何反应aside ，我正在使用引导程序，这是代码的一部分：

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> 

现场演示

当我检查页面并尝试减小浏览器的宽度（一旦他小于991px我发现未应用padding-left，我不知道如何解决此问题！

Answer 1

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

尝试：

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

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

Answer 2

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

或使用！important

padding-left: 47px !important;