当屏幕宽度 < 992px 时，我的 div 被隐藏答案

【问题标题】：my div is hidden when screen-width < 992px当屏幕宽度 < 992px 时，我的 div 被隐藏
【发布时间】：2019-04-21 04:11:52
【问题描述】：

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

这里是sn-p：

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

【问题讨论】：

标签： html css responsive-design bootstrap-4

【解决方案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>

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

【讨论】：

【解决方案2】：

试试这个，你不必为标题和内容指定静态值，为每个部分分别指定高度值，如果你希望它是由于视口的高度使用 vh 单位，如高度：5vh;

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

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

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

.content .green {
  height: 100px;
  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>

【讨论】：