мой div скрыт, когда ширина экрана <992px - PullRequest
Новая
       8

мой div скрыт, когда ширина экрана <992px

0 голосов
/ 20 апреля 2019

Я практикую макет bootstrap4, когда ширина экрана меньше 992 пикселей, мой коричневый div переопределяется на желтый 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>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2019

Попробуйте, Вам не нужно указывать статическое значение для заголовка и содержимого, Укажите значение высоты для каждой части отдельно, Если вы хотите, чтобы это было из-за высоты окна просмотра, используйте vh unit, как height: 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>
0 голосов
/ 20 апреля 2019

По мне, ваша проблема меньше 768px , а не 992px.Вот так:

Ваш дочерний элемент div (синий, коричневый, желтый и зеленый) на 100% больше высоты родительского элемента div (заголовок и содержимое).Поэтому строка содержимого будет покрывать коричневый блок, когда синий и коричневый находятся друг под другом.

Если бы была третья строка, подобная этой, зеленый div также был бы покрыт третьей строкой.

Чтобы исправить это, вы должны добавить медиазапрос : makeребенок делит на 50% высоту от родительского div и, возможно, сделает высоту родительского 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>

Надеюсь, это поможет.Ура!

...