html - 堆叠行时更改行中列的高度

Question

当使用 bootstrap 将列堆叠成两行时，如何更改列的高度？

https://jsfiddle.net/j6b49ngv/

如果宽度 ≥ 576px，一行中应该有两列，高度为 100%，效果很好 如果宽度 < 576px 每列 100% 宽度，两行，但高度应为 70% 和 30%，现在高度为每列 50%。如果我添加高度等级，例如 h-75 和 h-25，当它们未堆叠时，尺寸也会发生变化。

<div class="container-fluid " id="wrapper">
        <div class="row equal h-100">
            <div class="col p-0 ">
                <div id="test">Canvas window</div>                
            </div>
            <div class="col-sm-2 " id="sidebar">
              Sidebar für Konfigurator
            </div>
        </div>
    </div>
<style>
        * {
            margin: 0;
            outline: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
            min-height: 100%;
            position: relative;
            width: 100%;
            margin: 0px;
        }
        #wrapper {
        height: 100%;
        background: red;
        }
          #test{
              height: 100%;
              background-color: blue;
          }
          #sidebar{
              background-color: aqua;
          }
</style>

Answer 1

这可以使用 CSS @media 查询来完成。

@media screen and (max-width:576px) {
    #test {
        height: 70%;
    }
    #sidebar {
        height: 30%;
    }
}