Question

我希望在Twitter Bootstrap（最新的3.x.x版本）中减少各种屏幕尺寸的Jumbotron尺寸。视口断点现在会被触发，例如对于某个部分的display: none，但是Jumbotron尺寸不会发生变化。这里的问题是什么？

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .jumbotron {
  height: 30%;
  height: 30vh;
  }
}

这是我常用的设置

.jumbotron {
  padding-left: 50px;
  padding-right: 50px;
  background: #41A4DA;
  margin-bottom: 0px;
  min-height: 70%;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

Answer 1

min-height 保持70vh，身高尝试为30vh，将min-height放在媒体查询块中应该有效。

另外，请确保在css文件中的.jumbotron类之后解析@media查询块。

https://www.w3schools.com/cssref/pr_dim_min-height.asp

为什么在此解决方案中，对于较小的屏幕，Jumbotron的高度不会降低？

1 个答案: