html - 调整面板的高度@media

Question

我正在尝试在获取 col-md 时调整面板主体的高度。我知道使用媒体标签，但似乎无法使其正常工作，我将在下面发布我的 HTML 和 CSS。

.panel-height {
  height: inherit;
}

@media only screen and (max-width: 991px) {
  .panel-height {
    height: 280px;
  }
}

<div class="col-lg-8 col-md-6">
  <div class="menu-item gray">
    <div class="panel-heading text-center">
      <a>
        <p>Test</p>
      </a>
    </div>
    <hr />
    <div class="panel-body panel-height" style="height: 250px;">
      This is the body
    </div>
  </div>
</div>

Answer 1

你的 CSS 内联样式弄乱了 @media 查询。只需将它们放在您的外部 CSS 文件中即可。使用 color 的示例:

.panel-height {
  color: blue;
}
@media only screen and (max-width: 991px) {
  .panel-height {
    color: red;
  }
}

<div class="col-lg-8 col-md-6">
  <div class="menu-item gray">
    <div class="panel-heading text-center">
      <a>
        <p>Test</p>
      </a>
    </div>
    <hr />
    <div class="panel-body panel-height">This is the body</div>
  </div>
</div>

Resize the fiddle to see it work.

或在您的外部样式上使用!important，这将覆盖内联 那些 - JSFiddle