html - Bootstrap 行 - 在小型设备上折叠时强制 div 的高度相同

Question

当行在小型设备上折叠时，我试图在 Bootstrap row 中强制两个 divs 的高度相同。

所以代码差不多是这样的:

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

底部的图片说明了一千个字:图片的顶部是较大设备上发生的情况:两个 div 具有相同的高度，这正是我想要的 - 但是当我在小型设备上打开页面时，绿色 div 的高度比红色的要低很多。当行折叠时如何强制相同的高度？

Answer 1

您需要高度是动态的还是可以是设定高度？如果是这样，您可以通过给 div 一个 id 并为特定尺寸的设备设置 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;
    }

    }