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 query。只需将它们放在外部CSS文件中即可。使用color的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Resize the fiddle to see it work.

或使用!important上的external styles 覆盖 inline个JSFiddle

调整面板的高度@media

1 个答案: