尝试使用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我发现填充左边没有应用，我无法弄清楚如何解决这个问题！< / p>

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;
  }
}

Answer 2

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

或使用！important

padding-left: 47px !important;