html - 当屏幕宽度 < 992px 时我的 div 被隐藏

Question

我正在练习 bootstrap4 布局，当屏幕宽度小于 992px 时，我的 brown-div 被 yellow-div 覆盖，为什么以及如何解决这个问题？

这是片段:

.header {
  height: 100px;
}

.header .blue {
  height: 100%;
  background-color: blue;
}

.header .brown {
  height: 100%;
  background-color: brown;
}

.content {
  height: 100px;
}

.content .yellow {
  height: 100%;
  background-color: yellow;
}

.content .green {
  height: 100%;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

Answer 1

对我来说，您的问题是小于 768px，而不是 992px。开始了:

您的子 div(蓝色、棕色、黄色和绿色)占据父 div(标题和内容)100% 的高度。因此，当蓝色和棕色在彼此下方时，内容行将覆盖棕色 div。

如果有这样的第三行，绿色的div也会被第三行覆盖。

要解决此问题，您应该添加媒体查询:使子 div 的高度偏离父 div 的高度 50%，并且可能使父 div 的高度乘以 2。像这样:

.header {
  height: 100px;
}

.header .blue {
  height: 100%;
  background-color: blue;
}

.header .brown {
  height: 100%;
  background-color: brown;
}

@media (max-width: 767px) {
  .header {
    height: 200px;
  }
  .header .blue,
  .header .brown {
    height: 50%;
  }
}

.content {
  height: 100px;
}

.content .yellow {
  height: 100%;
  background-color: yellow;
}

.content .green {
  height: 100%;
  background-color: green;
}

@media (max-width: 767px) {
  .content {
    height: 200px;
  }
  .content .yellow,
  .content .green {
    height: 50%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

希望对您有所帮助。干杯!