Question

使用引导程序将列堆叠成两行时，如何更改列的高度？

如果宽度≥576像素，则应在两行中以100％的高度对齐，这可以正常工作并且如果width <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%;
    }
}

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

1 个答案: