Bootstrap row - заставляет одинаковую высоту div'ов при свертывании на маленьких устройствах

Question

Я пытаюсь заставить одинаковую высоту обоих divs в начальной загрузке row, когда ряд сворачивается на маленьком устройстве.

Так что код в значительной степени такой:

<div class="row">
    <div class="col-md-6">
         content
    </div>
    <div class="col-md-6>
         content
    </div>
</div>

Нижняя картинка говорит тысячу слов: верхняя часть изображения - это то, что происходит на больших устройствах: оба div имеют одинаковую высоту, чего я и хочу - но когда я открываю страницу на маленьком устройстве, зеленый divВысота намного ниже, чем красные.Как я могу форсировать ту же высоту, когда ряд разрушается?

Answer 1

Вы можете создать новый класс (пример: content1, content2), а затем вручную установить необходимые размеры в файле css.

.content1 {
   background-color: red;
   height: 400px;
}

.content2 {
    background-color: blue;
    height: 400px;
}

<div class="row">
    <div class="col-md-6 content1">
         content1
    </div>
    <div class="col-md-6 content2">
         content2
    </div>
</div>

Answer 2

Вам нужны высоты, чтобы быть динамическими, или они могут быть заданной высоты?Если это так, вы можете форсировать высоту, указав свой div-идентификатор и установив CSS для устройств определенного размера, например так:

HTML:

<div class="row">
    <div class="col-md-6" id="row1">
         content
    </div>
    <div class="col-md-6" id="row2">
         content
    </div>
</div>

CSS:

@media only screen and (max-width: 768px)
    {

    #row1{
    height: 300px;
    }

    #row2{
    height: 300px;
    }

    }