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>

希望有帮助。干杯！

Answer 2

尝试此操作，您不必为标题和内容指定静态值，为每个零件分别指定高度值，如果您希望由于视口的高度而使用高度单位，请使用高度单位：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>

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

2 个答案: