Question

我想创建两列，一列具有3个较小高度的框，第二列具有1个较大高度的框。但是，当我增加第二栏中的框的高度时，第一栏中的最后两个框被推到页面的下方。我希望2列同时发生。（我希望下面的红色和蓝色框向上移动到大灰色框旁边）

HTML：

<div class="row">
                <div class="col-xs-4">
                    <div class="l-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
                <div class="col-xs-7">
                    <div class="dashboard col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="rel-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="exp-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

CSS：

.l-board{
    background-color:#F5FCF4;
    margin-bottom: 10%;
}
.rel-board{
    background-color:#FAEDED;
    margin-bottom: 10%;
}
.exp-board{
    background-color: #F0F5FA;
    margin-bottom: 10%;
}

.dashboard{
    background-color: #F4F4F4;
}

当前外观：

我想要的布局：

Answer 1

引导程序基于行内的列工作。这意味着它总是水平运行，然后垂直运行。要获得所需的布局，您需要做的是考虑页面由两列组成。左和右。最左边的一列包含三个元素，它们全部用（col-12占据其余所有元素，而最右边的一列包含一个元素，其height的三倍。

请注意，您还必须考虑右侧列中的所有margin / padding；在下文中，我使用margin中的5px（主要是为了显示每个元素的background），这意味着我需要添加{{1 }}用于右边的列（覆盖外部20px以及两个内部height间隙）：

10px

5px

甚至可以结合使用 CSS variables 和 calc() 来扩展此设置，以确保所有.element { height: 100px; background: red; margin: 5px; padding: 10px; } .right .element { height: 320px; } / {{1 }}值始终正确映射，因此您不必担心自己处理计算-您要做的就是设置基数<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="row"> <div class="col-6"> <div class="row"> <div class="col-12"> <div class="element">Top-left</div> </div> </div> <div class="row"> <div class="col-12"> <div class="element">Mid-left</div> </div> </div> <div class="row"> <div class="col-12"> <div class="element">Bottom-left</div> </div> </div> </div> <div class="col-6 right"> <div class="element">Right</div> </div> </div>和height：

margin

height

引导程序中不同高度的列

1 个答案: